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

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

你可以probalby将它全部包装到动画状态 - 甚至可能不需要使用ngIf。您可以使用字符串在任意数量的不同动画状态之间进行区分，并相应地设置它们的样式。所以你可以有一个状态是'按钮刚刚点击'，另一个'按钮点击1000ms前'，另一个'动画结束'（不要逐字地使用这些字符串......但你明白我的意思）。这将使行为更加可预测。