So I am trying to specifically Angular Animations, and I noticed a strange output that I tried to find it’s explanation in the Animation Docs. The problem is as follows.

Situation 1:

In the second argument of the transition function is an array with only two elements. The first element is a style function and the second element is the animate function with only one argument (the amount of milliseconds)

V.S

Situation 2:

In the second argument of the transition function is an array with only one element. It’s the animate function and the animate‘s function second argument is a style function.

Take a look at the following example:

    transition('void => *', [
      style({
      transform: 'translateX(-100%)'
      }), 
      animate(1000)
  ]),

 transition('* => void', 
      [animate(1000, style({transform: 'translateX(100%)'}))]), // Situation 1


      transition('* => void', // Situation 2
        [
          style({transform: 'translateX(100%)'}),
          animate(1000)
        ])

The first situation works as expected. The item moves completely to the right and leaves the DOM.

The second situation does not work as expected. What happens is that the item moves to the rightmost side of the DOM. After that, it moves left to where it originally was. Then it just disappears.

Both processes take exactly 1 second. Can anyone explain why situation 2 is behaving that way?