角度进入/离开动画没有效果

Question

我按照https://angular.io/guide/animations 上的教程进行操作，但无法复制效果。

我的模板 (html) 包含：

<div *ngFor='let message of messages' [@slideInOut]="'in'" class="message">
   ...
</div>

我的消息类有一个高度属性：

div.message {
   height: 26px;
}

我希望消息在从消息列表中添加/删除时滑入和滑出（Y 轴）。下面的动画触发器没有做任何事情，也没有给出任何错误。我错过了什么？

 animations: [
    trigger('slideInOut', [
      state('in', style({height: '*'})),
      transition('void => *', [
        style({height: '0px'}),
        animate(1000)
      ]),
      transition('* => void', [
        animate(1000), style({height: '0px'})])
    ])
  ]

我在想，当从 DOM 中删除元素时，动画可能永远不会起作用，因为元素在动画播放之前就消失了。但即使是这样，当一个元素被添加到列表中时，它仍然应该做一些事情对吧？

Answer 1

您可以利用:enter 和:leave 转换关键字。在DOM中添加和删除元素时将触发动画。

动画

animations: [
  trigger('slideInOut', [
    transition(:enter ', [
      style({
        height: '0px'
      }),
      animate(1000, style({
        height: '*'
      })]),
    transition(':leave', [
      animate(1000), style({
        height: '0px'
      })
    ])
  ])
]

component.html

<div *ngFor='let message of messages' @slideInOut class="message">
  ...
</div>

查看有关该主题的official docs。