Javascript 如何使用angular 6触发fadeInRight效果

我想在typescript中实现一个使用fadeInRight动画的触发器

我得到了一个触发器，但是fadeIn和fadeOut

你能帮帮我吗

请按照下面的代码操作：

trigger('fade', [
  state('in', style({
      opacity: 1
  })),
  state('out', style({
    opacity: 0
  })),
  transition('in => out', animate('0ms ease-out')),
  transition('out => in', animate('500ms ease-in'))
])

使用

对于触发FadeInRight效果，请执行以下步骤

安装npm包

npm安装ng animate--保存

在

app.module.ts

文件中导入

BrowserAnimationsModule

从'@angular/platform browser/animations'导入{BrowserAnimationsModule}

在

component.ts

文件中导入

@angular/animations

模块和

ng animate

模块

从'@angular/animations'导入{trigger，transition，useAnimation}

从“ng animate”导入{bounce}

@Component

元数据中的

ComponentName.ts

文件添加以下代码

动画：[
触发器（'fadeInRight'，[transition（'*=>*'），使用动画（fadeInRight{
//将持续时间设置为5秒，延迟设置为2秒
参数：{定时：5，延迟：2}
}))])
]

在

ComponentName.html

文件中添加以下代码

这里FadeInRight动画正在工作。

---

但我想实现“右淡入”和“左淡入”@Andre，很抱歉回复晚了，但这些对您来说真的很有用。它的工作正如预期的那样。如果你仍然有问题，那么告诉我我很高兴帮助你。我很高兴帮助你。谢谢@Andrew，非常感谢！