Angular 9 - 动画和*ngIf条件。

Question

我想了解angular中的动画，但我现在真的很困难。除了这个具体的例子之外，如果有任何学习的来源，我将感激不尽。

下面是 爆料.

我的 目标 是在每次创建和销毁一个组件时通过 *ngIf 状况。

目前的问题。

• 动画应用于父动画的地方，只有在第一次加载时才会工作（这是唯一一次工作）。
• 应用于儿童的动画会导致奇怪的故障：它克隆一个组件一段时间（显然少于我在任何地方输入的时间），而不是破坏当前组件并在1秒后重新创建它。

希望不要看的太复杂。我创造了4个例子，这样我就可以弄清楚 和使用 :enter + :leave 相对于 void => * + * => void和 它们到底适用于谁：孩子还是元素本身？

罢工的问题得到了解答。

Answer 1

动画总是适用于它们所绑定的元素。

<div @comeOrGo>
    <hello *ngIf="show11" [name]="'Animation (1.1 on parent)'"></hello>
</div>

之所以一开始能用，是因为div是由angular创建并动画到视图中的。

然而，当你通过按钮切换它时，仅仅是将它的 hello 组件从DOM中移除，但没有移除div（动画被绑定）。

为了解决这个问题，我们可以这样做。

  <div @comeOrGo *ngIf="show11">
        <hello [name]="'Animation (1.1 on parent)'"></hello>
    </div>

这样就可以删除 div 从DOM（也有 hello)，因此会触发动画。

至于当你把按钮切换到快速时，会出现重复的故障。

这个问题是，当Angular从DOM中移除一个元素，而这个元素有动画时，它会一直播放这个动画，即使之后它再次创建组件。

我不知道最好的解决方法，但如果允许用户快速点击切换按钮，你就不应该使用一个 :leave 反正动画。