Angular 2动画结束了回调函数

发布时间：2020-12-17 17:04:39 所属栏目：安全来源：网络整理

导读：基于Angular 2的动画示例,有没有办法在动画结束时指定回调函数？ animations: [trigger('heroState',[ state('inactive',style({ backgroundColor: '#eee',transform: 'scale(1)' })),state('active',style({ backgroundColor: '#cfd8dc',transform: 'scale(

基于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类

<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%;
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!