javascript - 如何使用 Angular 6 触发 fadeInRight 效果

Question

我想在 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'))
])

Answer 1

使用ng-animate package for animation

要触发 FadeInRight 效果，请按照以下步骤操作。

1. 安装 npm 包

   npm install ng-animate --save

2. 导入 BrowserAnimationsModule在你的app.module.ts文件

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

3. 在你的component.ts文件导入 @angular/animations模块和 ng-animate模块

   import { trigger, transition, useAnimation } from '@angular/animations';<br/>
import { bounce } from 'ng-animate';

4. 你的 ComponentName.ts文件在 @Component元数据添加如下代码

   animations: [
trigger('fadeInRight', [transition('* => *', useAnimation(fadeInRight, {
// Set the duration to 5seconds and delay to 2seconds
params: { timing: 5, delay: 2 }
}))])
]

5. 在你的ComponentName.html文件添加以下代码

   <h1 [@fadeInRight]="fadeInRight">Here FadeInRight animation working..</h1>