ngIf 和儿童动画 - Angular4

Question

我在 Angular 4 中有以下模板：

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

<div class="global-block" *ngIf="isVisible" >
    <div class="content" [@slideRightLeft]>
       ... some content here ...
    </div>
    <div class="overlay" [@fadeIn]></div>
</div>

我已经使用触发器和过渡创建了 slideRightLeft 和 fadeIn 动画。

问题在于它适用于第一个切换（当isVisible == true），但当我隐藏它时不起作用（当isVisible == false 时，.global-block 立即隐藏并且孩子的动画不可见）。

我真的很想为这些子元素制作 2 个不同的动画，但我还需要切换 .global-block

有没有办法延迟ngIf？还是我的方法不好？

Answer 1

Yea ngIf 将立即从 DOM 中删除这些内容，删除所有后代及其相关动画。您可以使按钮仅在特定时间段后更改切换，等待动画完成，或者您可以使用另一种隐藏方法（可见性+不透明度），它不会将它们从 DOM 中删除。

您实际上可以将其全部包装到动画状态中 - 甚至可能不需要使用 ngIf。您可以使用字符串来区分任意数量的不同动画状态并相应地设置它们的样式。所以你可以有一个状态是“按钮刚刚被点击”，另一个状态是“按钮在 1000 毫秒前被点击”，另一个状态是“动画结束”（不要从字面上使用这些字符串......但你明白我的意思）。这将使行为更加可预测。