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

在您的组件中，

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

和

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

应该像

<div [@fadeInDownOnEnter]="animationState">

Answer 2

将模板'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

}

如何使用角度动画对单击进行动画处理

2 个答案: