angular - 角。有没有办法在初始渲染时跳过输入动画？

Question

:enter第一次渲染组件时，动画会应用于元素。有没有办法防止它？

检查这个 plunker以获得简单的width动画示例：

transition(':enter', [
  style({width: 0}),
  animate(250, style({width: '*'})),
]),

Answer 1

:enter只需向视图父级添加一个空动画即可。在这种情况下，初始子:enter动画将被禁用，但其他动画将起作用。

模板：

<div @parent>
    <div @child>test</div>
</dif>

动画：

trigger('parent', [
    transition(':enter', [])
])
trigger('child', [
    transition(':enter', [
      style({width: 0}),
      animate(250, style({width: '*'})),
    ]),
])

在这里你可以找到更详细的解释。

Answer 2

有空状态。这基本上代表了一种null状态。

在实践中，这可能看起来像这样：

trigger('myState', [
  state('previous', style({ transform: 'translateX(-100%)' })),
  state('current', style({ transform: 'translateX(0)' })),
  state('next', style({ transform: 'translateX(100%)' })),
  transition('void => *', animate(0)), // <-- This is the relevant bit
  transition('* => *', animate('250ms ease-in-out'))
])

这意味着只要一个元素还没有状态，并转换到任何状态，它就不应该动画。

所以，在你的情况下，它可以这样写：

transition(':enter', animate(0))

我希望这是有道理的。