typescript - Angular animation: först fadeout, sedan fadeIn

Jag har följande HTML

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

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

Och jag vill animera :leave och :enter övergången. Väldigt trivialt skulle jag säga

Jag kan göra detta med följande animation

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

Men problemet är att så snart övergången börjar är båda elementen synliga. Vad jag vill är att först försvinner :leave, och sedan dyker :enter upp. Vad är det korrekta sättet att uppnå detta?

Svar #1

Du kan uppnå det genom att lägga till en fördröjning för :enter-animationen lika lång som :leave-animationen

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

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

Relaterade artiklar