Router animation not working if animated element are not set to position: fixed or absolute

[rernens]

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 routing animation is used to animate route :enter or leave, animate transition is not run if animated view is not positionned fixed or absolute.

The following animation will not work as expected

trigger('routerAnimations', [
 transition( '* <=> *', [
    group([
    query( ':leave', [
      animate('500ms ease-in-out',
        style( {
          opacity: 0,
        })
      )
    ],{ optional: true }),
    query( ':enter', [
        style( {
          opacity: 0,
        }),
        animate('2s 250ms ease-in-out',
          style( {
            opacity: 1
          })
        )
      ],{ optional: true }),
    ])
  ])
])

while the following animation works as expected

trigger('routerAnimations', [
  transition( '* <=> *', [
    query(':enter,:leave', [
      style({
        position: 'fixed'
      })
    ],{ optional: true }),
    group([
    query( ':leave', [
      animate('500ms ease-in-out',
        style( {
          opacity: 0,
        })
      )
    ],{ optional: true }),
      query( ':enter', [
        style( {
          opacity: 0,
        }),
        animate('2s 250ms ease-in-out',
          style( {
            opacity: 1
          })
        )
      ],{ optional: true }),
    ])
  ])
])

Expected behavior

positionning the element should not be required to trigger animation

Minimal reproduction of the problem with instructions

http://embed.plnkr.co/xwCLlw6VHGpRW2n1Q7Gj/

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

forcing positionning fixed on the animated element might change its appearance during the animation compared to its normal appearance

Environment

Angular version: 4.4.4


Browser:
- [x] Chrome (desktop) Version 61.0.3163.100 (Build officiel) (64 bits)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [x] Safari (desktop) Version 11.0 (12604.1.38.1.7)
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.1 
- Platform:  MacOS Sierra 12.6

Others:

[matsko]

This is unfortunately a shortcoming of the DOM than of the animation language, but there is a way to make this work without using position: xxxxx.

Because the views are component DOM nodes that do not exist in HTML, the browser renders them by default as display:inline. This means that animating opacity on them might not work as intended (for some bizarre reason). So the solution to make sure each of your views have display:block set in a global CSS setting (or using :host within your component styles).
https://plnkr.co/edit/tMTXANTnQTlRDXX6uJxf?p=info

Auto-configuring this is out of the reach of Angular unfortunately.

[rernens]

@matsko

First thanks for this reply.
Than sorry for giving late feedback on the tests I have made based on your recommandations.

using

:host {
display: block;
}

in the style of each components does not change anything as you can see in the plunker.

With or without it, the behavior is exactly the same : the leaving component is pushed down as the entering component is inserted in the dom (but its content not being visible yet), then the animation starts, the leaving component fades out while the entering component fades in.

To make it properly work, the entering component needs its style prior to animation be set to not only opacity 0 but also to height 0. Then it works without display fixed and with :host display block.

I think, though, that there is a bug.

[Kromas]

This is still not working. Verified that this is a bug on march 2018

[nhhockeyplayer]

confirmed have yet to get mine to work either

[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.}