向ng-container添加动画

Question

我的Angular应用程序中有一个简单的sidebar组件：

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

在这个组件中，我通过延迟加载动态地显示组件(它们将呈现为<ng-container>)。

我面临的问题是:根据这个answer，不可能在<ng-container>上使用动画。我可以在每个我不想延迟加载的组件中定义相同的动画，然后它就可以工作了，但我不想这么做。有没有一种更干净的方法呢？

Answer 1

将动画附加到父元素：

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

并定义在组件加载后触发的yourTrigger，然后按示例编写动画，按高度显示：

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 }),
    ]),
  ])

我不知道您的惰性组件是什么样子的，所以您应该对query()语句做一些调整。