一个可重用的动画用于多个 Angular 组件?

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 >