多个 Angular 组件的一个可重用动画？答案

【问题标题】：One reusable animation for multiple Angular components?多个 Angular 组件的一个可重用动画？
【发布时间】：2020-02-17 11:49:27
【问题描述】：

我在我的 Angular 应用程序中使用动画，许多组件使用相同的动画，但为此我在每个组件中复制/粘贴动画。我们可以重复使用动画而不将其应用于单个组件吗？

【问题讨论】：

标签： angular animation components angular-animations

【解决方案1】：

您应该创建一个animations.ts 文件，并在每个组件中导入您想要的动画：

示例animations.ts

import {
  trigger,
  style,
  animate,
  transition,
  state,
  group
} from '@angular/animations';


export const rotations = [
  trigger('rotatedState', [
    state('default', style({
      transform: 'rotate(0)'
    })),
    state('rotated', style({
      transform: 'rotate(-180deg)'
    })),
    transition('rotated => default',
      animate('400ms ease-out')
    ),
    transition('default => rotated',
      animate('400ms ease-in')
    )
  ])
];

export const someOtherAnimations = [
  ...
];

现在导入component.ts：

import { rotations } from 'app/animations';

@Component({
  ...
  animations: [rotations],
})

现在您可以在您的component.html中使用：

<img @rotatedState >

【讨论】：