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

Question

:enter 动画是在第一次渲染组件时应用到元素上的。有什么办法可以预防吗？

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

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

Answer 1

有 void 状态。这基本上代表了一个 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'))
])

这意味着每当一个元素 还没有 状态，并且转换到 any 状态时，它应该' t动画。

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

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

我希望这是有道理的。

Answer 2

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

模板：

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

动画：

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

Here你可以找到更详细的解释。

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

Angular. Is there a way to skip enter animation on initial render?

angular

angular2-animation