angular - 如何使用角度动画在点击时为图像设置动画

Question

该动画在页面加载时有效，但我需要在单击按钮时为该图像设置动画

<div [@fadeInDownOnEnter]="'true'">
    <img src="https://www.seoclerk.com/pics/556744-1wYpi51504622425.jpg" alt="animatepic">
</div>
<button (click)="animate()">Animate it</button>

在 component.ts 文件中

import { fadeInDownOnEnterAnimation } from 'angular-animations';
@Component({
  animations: [
    fadeInDownOnEnterAnimation()
  ]
})


//method 
animate(){
  //what should I do here
}

标签： angularangular-animations

Answer 1

在您的组件中，

    animationWithState = false;
    animate(){
    this.animationState=true;
    this.animationWithState = !this.animationWithState;
    }, 1);

和

<div [@fadeInDownOnEnter]="'true'">

这应该像

<div [@fadeInDownOnEnter]="animationState">