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.