Angular 向ng容器添加动画

我在我的

Angular

应用程序中有一个简单的

侧边栏

组件：

<sidebar [visible]="isSidebarVisible$ | async">
    <ng-container #vc [@enterLeaveAnimation]></ng-container>
</sidebar>

在这个组件中，我通过延迟加载动态显示组件（它们被渲染到

）

---

我面临的问题是：根据这一点，不可能在

上使用动画。我可以在我不想延迟加载的每个组件中定义相同的动画，然后它就可以工作了，但我不想这样做。有更干净的方法吗？

将动画附加到父元素：

<sidebar [visible]="isSidebarVisible$ | async" [@enterLeaveAnimation]="yourTrigger">
    <ng-container #vc></ng-container>
</sidebar>

我不知道您的惰性组件是什么样子，所以您应该对

query（）

语句进行一些调整

trigger('enterLeaveAnimation', [
    transition('* <=> *', [
      query(':enter', [
        style({ height: 0 , overflow: 'hidden'}),
        animate( '200ms', style({ height: '*', overflow: 'unset' }))
      ],{ optional: true }),
      query(':leave', [
        style({ overflow: 'hidden'}),
        animate( '200ms', style({ height: 0 }))
      ], { optional: true }),
    ]),
  ])