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

Question

:enter animation is applied to an element when component is rendered the first time. Is there a way to prevent it?

Check this plunker for simple example of width animation:

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

Answer 1

Just add an empty :enter animation to the view parent. In this case the initial child :enter animation will be disabled, but further animations will work.

Template:

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

Animation:

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

Here you can find more detailed explanation.

Answer 2

There is the void state for that. Which basically represents a null state.

In practice, that could look like this:

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

What this means is that whenever an element doesn't have a state yet, and transitions into any state, it shouldn't animate.

So, in your case it could be written like this:

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

I hope that makes sense.