I have the same problem in IE11 in Angular 8.1.0: The animation seems to get stuck in a “animation-play-state: running;” state. Replacing “display: none;” with “height: 0;” seems to fix the problem.

@james-criscuolo, @dawda92 the diff is presence of display: 'none' in Stackblitz example and it’s absence in Material’s example
Angular 8 no longer support display property in animations. As I understood.

Also, to get expanded row hided on default state, it’s required to add overflow: hidden as in Material’s example

.example-element-detail {
  overflow: hidden;
  display: flex;
}

This works to me (take a note for an additional void state)

    trigger('detailExpand', [
      state('collapsed, void', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> void, expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])

@gizmodus @AmebaBrain I had the same issue with version 8.1.3 Animations containing display:block <=> display:none were not working on Safari Mac and iOS.

Solved by display property and using height:'*' <=> height:0 in animation states.

I would never get back the 2 weeks that I spent solving this but thank you very much, everyone

Working code:

trigger('displayAnim', [
        state('true', style({
            'height': '*', 'opacity': '1'
        })),
        state('false', style({
            'height': '0', 'opacity': '0'
        })),
        transition('true => false', [group([
            animate('200ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('200ms ease-in-out', style({
                'height': '0'
            })),
            // animate('200ms ease-in-out', style({
            //     'display': 'none'
            // }))
        ]
        )]),
        transition('false => true', [group([
            // animate('200ms ease-in-out', style({
            //     'display': 'block'
            // })),
            animate('200ms ease-in-out', style({
                'height': '*'
            })),
            animate('200ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),

After trying several of the solution suggested here. Setting the height affected my transitions in a way that I didn’t want and display: block and display: none was required for my UI. I found that this one worked best for my case.

// ...component.ts
@Component({  // ...
animations: [
   trigger('backdropAnimation', [
     state('false', style({
       'opacity': '0',
     })),
     state('true', style({
       'opacity': '1',
     })),
     transition(
       'false => true',
       animate('500ms ease-out')
     ),
     transition(
       'true => false',
       animate('400ms ease-in')
     ),
   ]),

// ...

 public isAnimationOptionsStateOpen = false;
 public backdropDisplay: 'block'|'none' = 'none';

// ...

 public backdropStart(): void {
   this.backdropDisplay = 'block';
 }

 public backDropDone(): void {
   this.backdropDisplay = (this.isAnimationOptionsStateOpen ? 'block' : 'none');
 }

// ...component.html
<div
      (@backdropAnimation.start)="backdropStart()"
      (@backdropAnimation.done)="backDropDone()"
      [@backdropAnimation]="isAnimationOptionsStateOpen"
      [ngClass]="['backdrop']"
      [ngStyle]="{'display': backdropDisplay}">
</div>

Any update on this part? I’m facing the same problem.

I have this issue in Chrome/safari in ios 12.1.4 with Angular 8.1. It works on Safari if the experimental feature for web animation is turned on.

@simeyla The example was prepared very quickly from already existing stackblitz to show that nothing happens in the Safari. I know that it is actually only fading out and it’s intended.

@Michsior14 I’m facing the same problem, where my animated container contains a mat-progress-bar so I don’t want to leave it animating the whole time my application is running!

The problem is I don’t think your example really works very well on Chrome either.

I changed your stackblitz to use longer delays (of 2 or 4 seconds). When you click the “Fade” button to fade in you don’t actually see anything fading in - it just jumps to being visible after 2 seconds or 4 seconds.

So while there does indeed seem to be a regression in Safari - because it just flat doesn’t work - there’s a better way to do the display: none thing like this:

The difference being the ‘block’ state is set on the transition. This works in Safari.

 trigger('activeAnimation',
        [
            state('inactive', style({ 'height': '0px', 'opacity': '0', 'display': 'none' })),
            state('active', style({ 'height': '30px', 'opacity': '1' })),

            transition('inactive => active', [
                style({ 'display': 'block' }),
                animate('5000ms ease-in')
            ]),

            transition('active => inactive', [
                animate('5000ms ease-in')
            ])
        ]),

Stackblitz

However I can’t figure out why the animation of the mat-progress bar is completely messed up - but the panel animates just fine.

Still facing this issue at 7.2.14. 7.2.7 is the last version working, as stated above.