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

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))

我希望这是有道理的。