angular reset transition state after animation

Question

So I've got this:

  animations: [
    trigger('shake', [transition('* => *', /* some animation */)])
  ]

And

<app-button
  [@shake]="shake"
>
</app-button>

When I click it, I set shake to true. When I click it again, I want the button to shake again but it doesn't because shake is already true.

How do I get around this?

New to Angular, thanks!

score 8 · Answer 1 · answered Mar 15 '19 at 13:57

8

Figured it out by doing this:

<app-button
  [@shake]="shake"
  (@shake.done)="shake = false"
>
</app-button>

I'm going to leave this open because, like I said, I'm new to angular and doing this might be taboo, so if any expert wants to correct me, feel free!

answered Mar 15 '19 at 13:57

Adam Jenkins

1

Keep in mind, that your animation is emitting a .done event when it's created - So you might need to handle the case void => false, if not already done :) – Jonathan Stellwag Mar 18 '19 at 10:14
1

@JonathanStellwag - thanks very much for that tip! I actually ended up changing `* => *` to `false => true` so I wouldn't have had to worry about it, but I didn't realize the done was emitted when it's created, I would've been tearing my hair out at another point if it wasn't for your tip, thanks! – Adam Jenkins Mar 18 '19 at 11:59
Glad it helped - just saw your answer and I remembered my struggles with it ^^ – Jonathan Stellwag Mar 18 '19 at 12:31

1 Answers1