基于Angular 2的动画示例,有没有办法在动画结束时指定回调函数？
animations: [
trigger('heroState',[
state('inactive',style({
backgroundColor: '#eee',transform: 'scale(1)'
})),state('active',style({
backgroundColor: '#cfd8dc',transform: 'scale(1.1)'
})),transition('inactive => active',animate('100ms ease-in')),transition('active => inactive',animate('100ms ease-out'))
])
]
解决方法
您可以非常轻松地管理动画,而无需依赖角度动画. Angular5现在支持大多数回调方法,包括’animationend’回调.
这是一个基本的例子.触发动画后,“anim-slide”(即包含动画的css类)将附加到DOM.这是通过使用’animClass’来完成的,它是一个常规的角度分量变量.动画完成后,通过清空’animClass’变量从DOM中删除css类
这是一个基本的例子.触发动画后,“anim-slide”(即包含动画的css类)将附加到DOM.这是通过使用’animClass’来完成的,它是一个常规的角度分量变量.动画完成后,通过清空’animClass’变量从DOM中删除css类
<div (click)="animClass='anim-slide'" >
<i class="far fa-bell"></i>
</div>
<div class="value" [ngClass]="animClass" (animationend)="animClass=''">
<div>some text that would slide in</div>
</div>`
CSS类供参考
.anim-slide{
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
