將動畫添加到 ng-container

Question

我的Angular應用中有一個簡單的sidebar組件：

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

在這個組件中，我通過延遲加載動態顯示組件（它們被渲染到<ng-container> ）。

我面臨的問題：根據這個答案，不可能在<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()語句進行一些調整。