我正在尝试为幻灯片菜单创建一个输入/离开动画.菜单用* 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时,：输入app-slide-menu工作的子元素的动画,但是,当isOpen = false时,不会留下动画.
似乎父母的* ngIf没有延迟儿童动画/他们甚至不知道他们正在死亡.
我应该做一些像传入isOpen：boolean via @Input()并将其应用于孩子吗？
甚至可以为HostBinding添加一个动画,它只会延迟它* ngIf？
解决方法
来自Matsko的
this comment为我工作.
以下是它的要点：
Angular 4引入了一些新的动画功能.有助于制作：在子元素上留下动画效果的是query和animateChild.
这是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 {...}
