角动画： :leave ( * => void) 不工作，因为 :enter (void => * ) 工作答案

【问题标题】：Angular animation: :leave ( * => void) not working as :enter (void => * ) is working角动画： :leave ( * => void) 不工作，因为 :enter (void => * ) 工作
【发布时间】：2020-09-08 16:57:51
【问题描述】：

我是角度动画的新手。我担心为什么 :enter 工作得很好。但是 :leave 不起作用。

这是我的代码：

    animations: [
    trigger('fade', [
      transition('void => *', [style({ opacity: 0 }), animate(4000)]),
      transition('* => void', [animate(4000, style({ opacity: 0 }))])
    ])
  ]

我想在 div 元素离开 DOM 时制作动画。

Stackblitz 链接here

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

问题是动画被链接在内部 *ngIf 并且不在同一级别：

<!-- container with ngIf --> 
<div *ngIf="show">
  <!-- element being animated -->
  <div @fade class="d-flex justify-content-start flex-wrap">
    <!-- other content -->
  </div>
</div>

发生的情况是，当ngIf 从 false 切换为 true 时，您的动画元素会被渲染并触发动画。

当ngIf 从 true 切换到 false 时，被销毁的 div 上没有动画，因此 Angular 不处理任何动画，并销毁（从 DOM 中删除）元素。它里面的所有东西都会立即处理，所以动画不会触发（或者在被移除的 DOM 元素的天堂触发，没有人可以看到它，但我离题了）。

要解决您的问题，只需将@fade 与*ngIf 放在同一元素上即可。

【讨论】：

谢谢@A。 Chiesa 详细解释了这个解决方案，现在它就像一个魅力.. ~ 干杯... 我想再问你一件事，在目前的情况下，我可以在使用 DOM 之前触发setTimeout() 得到相同的结果???
我想，“是的”，有点。你真的不能在另一个元素上使用 :leave 和 ngIf。这是因为 ngIf 会立即销毁自己。使用 setTimeout，您可以延迟您看到的突然移除。但是，您原则上可以使用状态为 @fade="fadeState" 的动画（并设置“正在移除”或任何适合您的用例的值），并使用 setTimeout 触发 ngIf 移除。
再次感谢@A。基耶萨的建议。我很期待。
如果你想协调多个动画，我建议阅读关于复杂动画的（不是很简单，但非常密集）Angular Docs 页面：angular.io/guide/complex-animation-sequences。在这种情况下，您将使用query 为单个元素设置动画，并且仍然将@fade 放在最顶层的 div 容器上。这个想法是你在全局容器上设置一个状态，每个状态转换都会以不同的方式对子元素进行动画处理，并行或顺序。
只需注意动画“非动画”属性，例如display。它只是不起作用。