Animation behaviour isn't explained well

[TunaYagci]

Can you update readme for animations' behaviours? Are those animations occur on click events? If not, how can we bind them to these events?

[yuyang041060120]

@MyHeartsECO see this example

<p [@animate]="'fadeIn'" *ngIf="show">fadeIn</p>
<button (click)="show = !show">toggle</button>

[yuyang041060120]

@MyHeartsECO or this example

class AppComponent {
    list: string[] = ['xxx', 'yyy'];

    onAdd() {
        this.list.push('zzz');
    }

    onRemove(i) {
        this.list.splice(i, 1);
    }
}

<button (click)="onAdd()">add</button>
<ul>
  <li *ngFor="let item of list;let i = index;" [@animate]="'fadeInLeft'">
    {{item}} <button (click)="onRemove(i)">X</button>
  </li>
</ul>

[TunaYagci]

Isn't the first example to hide the dom? I mean, can't we trigger this animations on click event?

I haven't tried the second example but it seems like animation is gonna happen only when the items are being added, not on removing.

[yuyang041060120]

@MyHeartsECO The second example of removing also works. I got your point, maybe you can try this.

<p [@animate]="state">fadeIn</p>
<button (click)="state = 'fadeInLeft'">fadeIn</button>

[TunaYagci]

Repo works awesome! I'm using this on a current project. Let's close this issue.

[mairanteodoro]

I'm trying to use this repo to have two different effects when the same button is clicked. The animation effect would be set by a tertiary test, like so:

animation = isSomeVariableTrue ? 'slideInDown' : 'slideOutUp'

Then I would use the 'animation' variable on the div I want to animate:

`<div [@animate]=animation> [...]

`

I have implemented this approach on a project of mine. However, despite the fact that the variable 'animation' does change its value correctly, the animation rendering never changes to other value than what it was first set.

Any ideas on what is happening? Am I missing something?

[Benz-Tracxpoint]

I have a div in which I would like to: Have a fade-in animation on show Have NO animation on hide

is it possible? i didnt find the way yet..