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

我想在打字稿中实现使用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'))
])

最佳答案

使用ng-animate package for animation

要触发FadeInRight效果，请遵循以下步骤。


安装npm软件包

npm install ng-animate --save
在您的BrowserAnimationsModule文件中导入app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
在您的component.ts文件中，导入@angular/animations模块和ng-animate模块

import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce } from 'ng-animate';
您在ComponentName.ts元数据中的@Component文件添加以下代码

animations: [ trigger('fadeInRight', [transition('* => *', useAnimation(fadeInRight, { // Set the duration to 5seconds and delay to 2seconds params: { timing: 5, delay: 2 } }))])]
在您的ComponentName.html文件中添加以下代码

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