問題

我在我的Angular應用程式中使用動畫,許多元件使用相同的動畫,但為此我在每個元件中複製/貼上動畫.我們可以重用動畫而不在單個元件上應用它.

  最佳答案

您應該建立一個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 >
 

  相同標籤的其他問題

angularanimationcomponents