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: '*'})),
]),

try this: https://stackoverflow.com/a/46186537/5155810 – Martin Cremer Sep 12 '17 at 23:31 — Martin Cremer, Sep 12 '17 at 23:31

score 51 · Accepted Answer · answered Jun 11 '18 at 06:02

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.

score 7 · Answer 2 · edited Oct 22 '19 at 17:25

7

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.

edited Oct 22 '19 at 17:25

Anton Temchenko

1,440
1
13
28

answered Jul 11 '17 at 13:27

D. Visser

875
2
12
19

4

Have you tried this solution? Try the plunker. Firstly `:enter` is a shortcut for `void => *` so there is no sense in `void => :enter`. Secondly I already use `:enter` animation in the component it's the root of the problem, because input gets animated even on first draw. – Sergey Sokolov Jul 13 '17 at 10:21
3

`ERROR: The provided transition expression "void => :enter" is not supported` – nest Feb 15 '18 at 08:57
Much more intuitive and semantic than the accepted answer. The other one is just a hack thta accidentally shows the intented behavior. – Lazar Ljubenović May 14 '20 at 03:41
Quite the contrary: 'transition('* => *'` is a dirty hack, and accepted answer: 1) makes total sense; 2) works. – OZ_ Dec 10 '22 at 15:04

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

2 Answers2

Linked