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

【问题标题】：Angular. Is there a way to skip enter animation on initial render?角。有没有办法在初始渲染时跳过输入动画？
【发布时间】：2017-10-22 00:22:07
【问题描述】：

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

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

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

【问题讨论】：

试试这个：stackoverflow.com/a/46186537/5155810

标签： angular angular2-animation

【解决方案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: '*'})),
    ]),
])

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

【讨论】：

【解决方案2】：

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

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

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

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

我希望这是有道理的。

【讨论】：

你试过这个解决方案了吗？试试小丑。首先:enter 是void => * 的快捷方式，所以void => :enter 没有意义。其次，我已经在组件中使用了:enter 动画，这是问题的根源，因为即使在第一次绘制时输入也会被动画化。
ERROR: The provided transition expression "void => :enter" is not supported
比公认的答案更加直观和语义化。另一个只是一个不小心表现出意图行为的黑客行为。