angular – 子元素上的动画不会触发：如果主机组件更改为* ngIf

发布时间：2020-12-17 18:10:29 所属栏目：安全来源：网络整理

导读：我正在尝试为幻灯片菜单创建一个输入/离开动画.菜单用* ngIf打开(因为我需要ngOnInt) 外部： app-slide-menu *ngIf="isOpen"/app-slide-menu 内部： div class="dark-overlay" [@fadeinout] /divnav class="menu" [@slideinout] aLink/a aLink/a aLink/a aLi

我正在尝试为幻灯片菜单创建一个输入/离开动画.菜单用* 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 {...}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!