Angular animation sequence

Question

I'm trying to make a FAB button in Angular with a third state.

When the user clicks on a button it opens a "detail view" of that button.

See the stackblitz, plz https://stackblitz.com/edit/angular-dgx6fl

The problem is, the 'open' and 'detail' states occur in parallel, not in sequence.

So I have this kind of "mix" state, the detail view starts transitioning while the fab buttons are still closing.

How to avoid that and start triggers in sequence?

Thanks!

The stackblitz url you gave is the wrong one, you gave the app URL but you need to give the editor URL — danday74, Oct 09 '18 at 19:49
Your reasoning on the provided code is wrong. The detail state is unique to each button and therefore should be internalized. You can't have a general detail state and expect it to magically appear on each button. This is not a question suited to stack overflow, if you have a programming related question and not a general failure of reasoning, please post that question. — Avin Kavish, Oct 09 '18 at 21:16
Isn't my question programming related? Sorry, but it is, and yes I can have a general detail container and put any template reference inside it. But don't worry. — Paulo GR, Oct 09 '18 at 21:23

score 0 · Answer 1 · answered Oct 10 '18 at 04:34

I've had a little play here https://stackblitz.com/edit/angular-2xy6u1

You were doing the animations on state change but I think you need to identify changes from and to specific states like so:

transition('close => open', [
  animate('200ms ease-in-out')
])

transition('open => detail', [
  animate('200ms ease-in-out')
])

Here, in the first example the animation only fires during transition from the close to the open state. By restricting it like this, your animations won't fire when you don't want them to.

I'm not sure this is the exact behaviour you want but hopefully it will lead you in the right direction.

Docs for animations are here:

https://angular.io/guide/animations

Angular animation sequence

1 Answers1