Одна многоразовая анимация для нескольких угловых компонентов?

Question

Я использую анимацию в своем приложении Angular, и многие компоненты используют одну и ту же анимацию, но для этого я копирую / вставляю анимацию в каждый компонент. Можем ли мы повторно использовать анимацию, не применяя ее к отдельным компонентам.

Answer 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 >