How to go through multiple states with Angular 4 animations?

Question

I am working with Angular 4 animations, and I wanted to know what is the best way to go from an initial state to a final state, through other ones. If we take this as an example (https://angular.io/guide/animations) :

animations: [
  trigger('animationState', [
    state('stateOne', style({
      // some style
    })),
    state('stateTwo',   style({
      // some style
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

So the question is, if I add a third and fourth state and I toggle the active state from 'stateOne' to 'stateTwo', how to define the transition so it goes automatically through the other ones like this : stateOne => stateThird => stateFourth => stateTwo. Is there a way to define a transition to have this behaviour without any workarounds ?

Answer 1

You can use Angular's keyframes(). Als take a look at Complex animation sequences.