子元素上的动画不会触发:如果主机组件更改为*ngIf ="false"则离开

Question

我正在尝试为幻灯片菜单创建一个输入/离开动画.菜单用*ngIf打开(因为我需要ngOnInt)

外部:

<app-slide-menu *ngIf="isOpen"></app-slide-menu>

内部:

<div class="dark-overlay" [@fadeinout] ></div>
<nav class="menu" [@slideinout] >
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
</nav>

当isOpen外部更改时,动作:enter为子元素的app-slide-menu工作,但:leave动画不会在何时isOpen = false.

看起来*ngIf父母的动画没有延迟儿童动画/他们甚至不知道他们正在死亡.

我应该做一些像传入isOpen: boolean途径@Input()并将其应用于孩子的事情吗？

也许甚至可以添加一个动画HostBinding,除了延迟它之外什么都不做*ngIf？

Answer 1

你好，我举个小例子：

https://embed.plnkr.co/RDL4yuex2Q7gGbHlcLsQ/

显示转换的定义：

transition('void => *', [...

hide 的转换定义：

transition('* => void', [...

'void'：该状态由 Angular 保留。void 状态意味着元素不再是应用程序的一部分。void 状态的例子是，当 ngIf 表达式值为 false 并且该元素不再存在于 DOM 中时。

'*'：这是默认状态。这是尚未在触发函数中声明的状态。* state 用于动画中的动态开始和结束状态。