时间戳

首页 > 解决方案 > 角度动画：首先淡出，然后淡入

angular - 角度动画：首先淡出，然后淡入

问题描述

我有以下 HTML

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

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

我想为:leave和:enter过渡设置动画。我会说非常微不足道

我可以用下面的动画做到这一点

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

但问题是，一旦过渡开始，两个元素都是可见的。我想要的是首先:leave消失，然后:enter出现。实现这一目标的正确方法是什么？

标签： angulartypescriptangular-animations

解决方案

:enter您可以通过为动画添加等于动画长度的:leave延迟来实现它

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

参考：https ://angular.io/api/animations/animate

推荐阅读