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动画不在{{1} }}。

似乎父母的isOpen = false没有为儿童动画延迟/他们甚至不知道他们正在死亡。

我是否应该通过*ngIf传递isOpen: boolean并将其应用于孩子？

甚至可以向@Input()添加一个动画，除了延迟它HostBinding之外什么都不做？

Answer 1

来自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 {...}

Answer 2

嗨，我做了一个小例子：

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

showup过渡的定义：

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

隐藏过渡的定义：

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

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

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

子元素的动画不会触发：如果主机组件更改为* ngIf =＆＃34; false＆＃34;

2 个答案:

以下是它的要点：