CODEWITHSUNDEEP
angularangular-animations
Udith Shalinda
Udith Shalinda

Reputation: 487

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

This animation works when the page loads,But I need to animate this image on a button click

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

in component.ts file 

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


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

Upvotes: 3

Views: 479

Answers (2)

Kavindu Gayantha
Kavindu Gayantha

Reputation: 376

in your component ,

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

and 

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

this should be like

<div [@fadeInDownOnEnter]="animationState">

Upvotes: 7

orimdominic
orimdominic

Reputation: 1135

Instead of a static value 'true' in your template, set the value of the [@fadeInDownOnEnter] attribute to a variable that will be referenced from your component like so

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

Then in your component

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

}

Upvotes: 0

Related Questions