[英]One reusable animation for multiple Angular components?
I am using animations in my Angular app, and many components use the same animation but for that I copy/paste the animation in each component.我在我的 Angular 应用程序中使用动画,许多组件使用相同的 animation 但为此我在每个组件中复制/粘贴 animation。 Can we reuse the animations without applying it on individual components.
我们可以重用动画而不将其应用于单个组件吗?
You should create an animations.ts
file, and import the animation you want in each component:您应该创建一个
animations.ts
文件,并在每个组件中导入您想要的 animation:
Example 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 = [
...
];
Now import in component.ts
:现在导入
component.ts
:
import { rotations } from 'app/animations';
@Component({
...
animations: [rotations],
})
Now you can use in your component.html
:现在您可以在您的
component.html
中使用:
<img @rotatedState >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.