如何使用 angular-animations 在单击时为图像设置动画

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
}

Answer 1

不要在模板中使用静态值 'true'，而是将 [@fadeInDownOnEnter] 属性的值设置为一个变量，该变量将像这样从您的组件中引用

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

然后在你的组件中

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

animationState  = 'true';
//method 
animate(){
    //what should I do here
    this.animationState = this.animationState === 'true' ? 'false' : 'true';
    // the code above will toggle the value of animationState between 'true' and 'false'
    // in order to update the animation

}

Answer 2

在你的组件中，

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

和

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

这应该是这样的

<div [@fadeInDownOnEnter]="animationState">

如何使用 angular-animations 在单击时为图像设置动画

How to animate an image on a click using angular-animations

angular

angular-animations