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

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.

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.