如何在 Angular 中使用单独的 .ts 文件中的动画触发器？

Question

Angular中有一个导出动画触发器example：

import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
export const triggerAnimation = trigger('openClose', [
  transition('open => closed', [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: 'red',
        time: '1s'
      }
    })
  ])
]);

但我不知道如何在我的组件中使用它。有 useAnimation() 方法，但没有 useTrigger() 之类的方法。

Answer 1

与您使用任何其他动画的方式相同，如 official guide 中所列。基本上你在 @Component

中添加你的动画

唯一的区别是您必须导入在不同模块中定义的那个，例如

import { triggerAnimation } from 'path-to-your-file-with-animations'

    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.css'],
      animations: [
        triggerAnimation
      ]
    })

如何在 Angular 中使用单独的 .ts 文件中的动画触发器？

How to use the animation trigger from separate .ts file in Angular?

html

javascript

css

animation

angular