我想无限迭代动画并在我的组件中停止和启动。我编写了以下代码:
@Component({
selector: 'page-login',
templateUrl: 'login.html',
animations: [
// Each unique animation requires its own trigger. The first argument of the trigger function is the name
trigger('run', [transition('void => *',[animate(1000, keyframes([
style({transform: 'translateX(0) rotateY(0)', offset: 0}),
style({transform: 'translateX(10%) rotateY(70deg)', offset: 0.33}),
style({transform: 'translateX(20%) rotateY(30deg)', offset: 0.66}),
style({transform: 'translateX(0%)', offset: 1.0})
]))
])
])
]
})
在 HTML 文件中,我编写了以下代码:
<img @run id="animicon" src="assets/.../logo_1.png" style="background:black" class="image--background">
在这种情况下,
使用 Angular 动画是不正确的。它们旨在通过路由器或 *ngIf 添加组件时使用,或者以编程方式添加,当常规/纯 CSS 无法使用或不起作用时。
添加它们只会使您的代码变得不必要地复杂,甚至很慢.
对于您在帖子中描述的情况,您不需要 Angular 动画,纯 css 动画就足够了:
.CSS
@keyframes myAnimation {
0% {transform: translateX(0) rotateY(0)}
33% {transform: translateX(10%) rotateY(70deg)}
66% {transform: translateX(20%) rotateY(30deg)}
100% {transform: translateX(0%)}
}
img {
animation: myAnimation 5s infinite;
}
演示
<小时 />但是,如果您仍然想使用Angular方法,这里有一个方法。
TS:
.....
animations: [
// Each unique animation requires its own trigger. The first argument of the trigger function is the name
trigger('run', [
transition('* => *', [
animate(
1000,
keyframes([
style({ transform: 'translateX(0) rotateY(0)', offset: 0 }),
style({
transform: 'translateX(10%) rotateY(70deg)',
offset: 0.33,
}),
style({
transform: 'translateX(20%) rotateY(30deg)',
offset: 0.66,
}),
style({ transform: 'translateX(0%)', offset: 1.0 }),
])
),
]),
]),
],
....
trigger: boolean;
ngOnInit() {
setInterval(() => (this.trigger = !this.trigger),1000);
}
.HTML:
<img
[@run]="trigger"
.....
/>
演示