Animations jump around during router-outlet transitions

[doubleUTF]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] 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

Current behavior

When switching router pages by clicking navigation links(Projects<-->Users), the leaving component instantly teleports below where the entering component would be, creating a disjointing appearance during animation.

Expected behavior

The leaving component should leave from its current position and not teleport anywhere unless specified in the animations metadata. The desired behavior is to create a seamless transition.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-fjxwoq?file=styling-assignment%2Fapp.component.ts

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

To create a seamless transition for animating between router pages.

Environment

Angular version: 5.2.8
Angular Animations: 5.2.9


Browser:
- [X ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 9.5.0 
- Platform:  Windows 7 

Others:

I've tried using position:'fixed' in the hosting components and while the the disjointing is fixed, the end state results in a disappearing component. If I add style({transform:'translateY(-100%)'}) to the leaving component, leaving users page appears smooth but that means leaving another page(Servers) with a greater height looks terrible.

[tkiddleYoobic]

Hi I was just wondering if there were any updates on this? Im having a similar issue.

[thePunderWoman]

This issue was closed as obsolete due to the introduction of the new animate.enter and animate.leave APIs. The @angular/animations package is now deprecated and will be removed in Angular v23. We hope you give the new APIs a try.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}