Блог

Эта анимация работает при загрузке страницы, но мне нужно анимировать это изображение при нажатии кнопки

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

в вашем компоненте ,

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

и

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

это должно быть похоже

 <div [@fadeInDownOnEnter]="animationState">
  

Вместо статического значения '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

}