Угловой. Есть ли способ пропустить ввод анимации при начальном рендере?

Question

:enter Анимация применяется к элементу, когда компонент отображается в первый раз. Есть ли способ предотвратить это?

Проверьте этот поршень для простого примера 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('void => :enter', animate(0))

Я надеюсь, что в этом есть смысл.