Can't set display during animation

[pauldraper]

🐞 bug report

Affected Package

@angular/animation or @angular/platform-browser

Is this a regression?

Unknown.

Description

While animating, it is often helpful to make elements appear and disappear from the layout. The display style does this; however Angular will not set a display style while animating.

🔬 Minimal Reproduction

Note that the visibility style is set, but the display is not.

https://stackblitz.com/edit/angular-animation-display

import { Component, HostBinding, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { trigger, transition, query, style, animate, group } from '@angular/animations';
;

@Component({
  animations: [
    trigger('animate', [
      transition('* <=> *',
        group([
          query('.display', [
            animate('500ms', style({ color: 'blue' })),
            style({ display: 'block' }),
            animate('2000ms', style({ color: 'black' }))
          ]),
          query('.visibility', [
            animate('500ms', style({ color: 'blue' })),
            style({ visibility: 'visible' }),
            animate('2000ms', style({ color: 'black' }))
          ]),
        ])),
    ]),
  ],
  selector: 'app',
  styles: [`
    div {
      background: red;
    }
    p {
      color: white;
    }
    * {
      display: block;
      margin-bottom: 20px;
    }
    .display {
      display: none;
    }
    .visibility {
      visibility: hidden;
    }
  `],
  template: `
    <p>Angular {{ version }}</p>
    <button (click)="state = !state">Trigger</button>
    <div [@animate]="state" class="block">
      <p class="display">Display animating...</p>
      <p class="visibility">Visibility animating...</p>
    </div>
  `,
})
export class AppComponent {
  @HostBinding('class.block') readonly block = true;

  state = true;
  version = VERSION.full;
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

🔥 Exception or Error

N/A

🌍 Your Environment

Angular Version:
7.1.2

Anything else relevant?

A workaround is to control the display manually with setTimeouts; however, this is not guaranteed to sync up with the rest of the animations.

[MagnusBrzenk]

Any news on this? I recently decided to remove all angular animations from my latest app because I'm nervous about sinking a ton of time into a library that is either broken or that I'm failing to comprehend. It's a shame, because angular animations has great potential.

[sboesch]

Will this ever work...?
I've spent the whole day butchering the animation system only to find out it doesn't support CSS properly.

Sure, you could probably work around this using ugly position hacks, but this has numerous drawbacks...

style({
  position: 'fixed',
  visibility: 'hidden',
  left: -9999,
  top: -9999,
})

At least you should throw an error message if someone uses properties which are not supported.

[pauldraper]

FWIW @MagnusBrzenk I'd avoid animations as much as possible.

They're indispensable for leave animations (they hook into the renderer), but even then I use TS hooks to add CSS classes.

[dario-piotrowicz]

Hi @pauldraper the issue here is that the animations are run using the standard web animations, and whilst visibility is an animatable CSS property display is not, that is why you are unable to set it here.

If you check out the MDN Animatable CSS Properties list you will see that visibility appears there (whilst display does not).

You can also check in the w3c specs the Animation of visibility section, there you can see that visibility gets actually interpolated (between visible and hidden I'd imagine), no such section exist for display as for it.

Also in this stackblitz I made you can see that also with standard native css animations display can't be animated whilst visibility can (so the animation of display does not work anywhere, so I don't think the Angular animations should be the exception to this rule).

---

So I believe it is totally correct and expected that display is not being animated here, I'd imagine there could be some workarounds to be done but they would be pretty complex and hacky for something that should actually (in my opinion) not even be supported (since it is not in the web animations/css specs).

What I think could be improved here is to at least provide some warnings when you try to animate non-animatable properties.

What do you think? 🙂

[pauldraper]

@dario-piotrowicz if this is simply a limitation of the browser API, then this can be closed.

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