@angular/animations. incoherent and inconsistent behavior when animating divs

[nasreddineskandrani]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I am playing around with the animation package and multiple points i have to raise here.
Please look at the stackblitz link provided to understand the bottom example.

For the exact same animation code (but with 2 different animation triggers):
. item red in an ngFor
. item yellow without ngFor

When you hit the button a first time
item red: move with animation (20px)
item yellow: move with animation (30px)

When you hit the button a second time
item red: move with animation from the beginning of the row (not from his current position) => Problem1 (lost position)
item yellow: move with NO animation from his current position to the new one => Problem2 (lost animation)

note:
When you uncomment only the line in the method animSecondDone the problem2 is solved. But it should not be needed in my opinion since transition('* => moveYellowX', animate('1s linear')) includes moveYellowX to moveYellowX.
Doing the same for red item=> when you uncomment only the line in the method animDone, it broke the animation of red Item totally Problem3.

Problem4 => animation behave differently with/without ngFor

I think all problems [1 to 4] mentioned should be fixed. Can you confirm that all these are problems?
(i didn't open one issue per problem but we can if you confirm and needed)

Expected behavior

On each button click, item yellow and item red behave the same so move horizontally with animation.

Minimal reproduction of the problem with instructions

check Current behavior section for instructions.
https://stackblitz.com/edit/angular-animations-poke-bugs?file=src/app/anim-test-a.component.ts

What is the motivation / use case for changing the behavior?

Fixing the package.

Environment

Angular V. => all in the stackblitz package.json

Browser:

• Chrome (desktop) Version 68.0.3440.106 (Official Build) (64-bit)