角度 5 进入/离开动画不起作用

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

组件.html

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

查看有关该主题的官方文档。