angular - 子元素上的动画不触发 :leave if the host component is changed to *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 没有为子动画延迟/他们甚至不知道他们正在死去。

我是否应该通过 @Input() 传入 isOpen: boolean 并将其应用于子级？

甚至可以向 HostBinding 添加一个动画，它除了延迟 *ngIf 什么都不做？

Answer 1

this comment来自Matsko的为我工作。

这里是它的要点:

Angular 4 引入了一些新的动画功能。 query 和 animateChild 有助于使 :leave 动画在子元素上起作用。

这是 Matsko 的例子:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="toggle()">Toggle</button>
      <div *ngIf="show" @ngIfAnimation>
        <h3 @easeInOut>I'm inside ngIf</h3>
      </div>
    </div>
  `,
animations: [
  trigger('ngIfAnimation', [
    transition(':enter, :leave', [
      query('@*', animateChild())
    ])
  ])
  //...
]
})
class App {...}