Clever Geek Handbook

Angular. Is there a way to skip the input animation on initial rendering?

:enter

animation is applied to the element the first time the component is displayed. Is there a way to prevent this?

Check out this plunker for a simple animation example width

:

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


source to share


1 answer


There is void for this . Which basically represents the state null

.

In practice, it might 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'))
])

This means that whenever an element is still stateless and transitions to any state, it should not animate.



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

transition('void => :enter', animate(0))

Hope this makes sense.

0


source






More articles:


All Articles