Angular animation: first fadeout, then fadeIn

Question

I have the following HTML

<div @fadeInOut *ngIf="state">State is true</div>
<div @fadeInOut *ngIf="!state">State is false</div>

<button (click)="state = !state">Toggle</button>

And I want to animate the :leave and :enter transition. Very trivial I would say

I can do this with the following animation

 trigger("fadeInOut", [
      transition(":enter", [
         style({ opacity: 0 }),
         animate(1000, style({ opacity: 1 }))
      ]),
      transition(":leave", [animate(1000, style({ opacity: 0 }))])
 ])

But the problem is that as soon as the transition begins both elements are visible. What I want is that first the :leave goes away, and then the :enter appears. What is the correct way to achieve this?

Answer 1

You can achieve it by adding delay for the :enter animation equal to the length of the :leave animation

trigger("fadeInOut", [
  transition(":enter", [
    style({ opacity: 0 }),
    animate("1000ms 1000ms", style({ opacity: 1 }))
  ]),
  transition(":leave", [animate(1000, style({ opacity: 0 }))])
])

Reference: https://angular.io/api/animations/animate