Angular 9 - 动画和 *ngIf 条件

Question

我正在尝试理解 angular 中的动画，但目前我很难理解它。除了这个具体示例之外，任何学习资源都将受到赞赏。

这里是 stackblitz.

我的 目标 是在每次通过 *ngIf 条件创建和销毁组件时为组件设置动画。

当前问题：

• 动画应用于 parent 动画仅在第一次加载时起作用（这是它唯一起作用的时间）
• 应用于 children 的动画会导致奇怪的故障：它会克隆一个组件一段时间（显然少于我进入任何地方的时间）而不是销毁当前组件并在 1 秒后重新创建它

我希望它看起来不会太复杂。我创建了 4 个示例，以便我可以弄清楚 使用 :enter + :leave 与 void => * + * => void 和 [=38= 之间的区别是什么] 他们真正适用于谁：child 还是元素本身？

提出的问题已得到解答。

Answer 1

动画始终应用于它们绑定到的元素。

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

这最初起作用的原因是 div 是由 angular 创建并动画显示在视图中的。

然而，当您通过按钮切换它时，只会从 DOM 中删除 hello 组件，而不是 div（动画绑定到的组件）。

要修复我们可以这样做：

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

这会从 DOM（以及 hello）中删除 div，从而触发动画。

至于快速切换按钮时的复制故障：

问题是，当 Angular 从 DOM 中删除一个元素并且该元素有一个动画时，它将始终播放这个动画，即使它之后再次创建该组件也是如此。

我不知道最好的解决方案，但如果允许用户快速单击切换按钮，则无论如何都不应该使用 :leave 动画。