这是我的下面的代码我想无限地迭代动画&停止并在我的组件中开始我已经写下面的代码
@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">
当通过路由器或* 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;
}