一個可重復使用的 animation 用於多個 Angular 組件？

Question

我在我的 Angular 應用程序中使用動畫，許多組件使用相同的 animation 但為此我在每個組件中復制/粘貼 animation。 我們可以重用動畫而不將其應用於單個組件嗎？

Answer 1

您應該創建一個animations.ts文件，並在每個組件中導入您想要的 animation：

示例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 >