:leave animation does not work on Firefox and Edge

I’m submitting a…

[x] Bug report  

Current behavior

The enter animation is working fine on all the browsers, but the leave animation is not working on firefox and edge (works on chrome and safari)

Expected behavior

Should work as it works in chrome and safari

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-xivr7n

Environment

Angular version: 5.0.0


Browser:
- [x] Firefox version 57
- [x] Edge version 41
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[mham]

In your case Angular needs to calculate styles for width (explicitly set to *) and margin (not provided but used in animation, so implicitly *).

transition(':leave', [
  style({ transform: 'scale(1)', opacity: 1, width: '*' }),
  animate('1s cubic-bezier(.8,-0.6,0.2,1.5)', 
    style({ transform: 'scale(0.5)', opacity: 0, width: '0px', margin: '0px' }))
])

From documentation for style function.

Auto-styles (using *)

When an asterix (*) character is used as a value then it will be detected from the element being animated and applied as animation data when the animation starts.

This feature proves useful for a state depending on layout and/or environment factors; in such cases the styles are calculated just before the animation starts.

Angular uses Window.getComputedStyle to calculate property value for auto-styles. Window.getComputedStyle returns empty string for margin property in Firefox. When property value is empty string, Angular sets REMOVAL_FLAG of element to NULL_REMOVED_QUERIED_STATE and then the NoopAnimationPlayer is used - animation does not play.

When property is not longhand property, we should ignore its empty value.

According to specification of CSS Object Model, Window.getComputedStyle returns all longhand properties. While iterate over numeric indexes of Window.getComputedStyle, there is no margin property in Chrome and Firefox. But when access margin property directly, there is non-empty value in Chrome and empty value in Firefox. We cannot rely on this across the browsers.

var computed = window.getComputedStyle(document.body);
// no margin
for (var i = 0; i < computed.length; i++) {
  if (computed[i].startsWith('margin')) {
    console.info(computed[i]);
  }
}
// non-empty in Chrome, empty in Firefox
console.info(computed['margin']);

Workaround is use of longhand properties.

[angular-automatic-lock-bot[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.}