Question

我按照在https://angular.io/guide/animations找到的教程，但无法复制效果。

我的模板（html）包含：

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

我的消息类有一个height属性：

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。

Angular5进入/离开动画无效

1 个答案: