CODEWITHSUNDEEP
angulartypescriptcross-browserangular-animations
FakeEmpire
FakeEmpire

Reputation: 798

Angular Animation not transitioning in IE11 and Firefox (works in Chrome)

My Angular animation attached to a div works in Chrome (increasing the a height of 0 to height: '*'). I have imported all the necessary polyfills and installed web-animations-js

The height increases, however there is no animation transition happening in IE and Firefox.

animations.ts

import {
  trigger,
  state,
  style,
  transition,
  animate
} from "@angular/animations";

export const Animations = {
  animations: [
    trigger("expansionTrigger", [
      state(
        "true",
        style({
          height: "*",
          display: "inline-block",
          width: "100%",
          overflow: "hidden"
        })
      ),
      state(
        "false",
        style({
          height: "0",
          display: "none",
          padding: "0",
          overflow: "hidden"
        })
      ),
      transition("true => false", animate("1s 100ms ease-out")),
      transition("false => true", animate("1s ease-in"))
    ]),
    trigger("fadeInTrigger", [
      state(
        "true",
        style({
          opacity: "1"
        })
      ),
      state(
        "false",
        style({
          opacity: "0"
        })
      ),
      transition("true => false", animate("1s ease")),
      transition("false => true", animate("1s 300ms ease"))
    ])
  ]
};

content.component.html

<div
[@expansionTrigger]="isExpanded === 'true' ? 'true' : 'false'"
[@fadeInTrigger]="isExpanded === 'true' ? 'true' : 'false'"
class="ds-u-sans">
    <div class="padding-20">
        <ng-content></ng-content>
    </div>
</div>

content.component.ts

import { Component } from '@angular/core';
import { Animations } from '../animations'

@Component({
  selector: 'app-accordion-content',
  templateUrl: './accordion-content.component.html',
  styleUrls: ['./accordion-content.component.css'],
  animations: [
    Animations.animations
  ]
})
export class AccordionContentComponent  {
  isExpanded: string = "false";

}

Upvotes: 2

Views: 2504

Answers (1)

donmckenna
donmckenna

Reputation: 184

Don't know if you've found a solution yet or if this will actually help your particular situation, but I had a similar problem and fixed it by using explicit marginTop / paddingBottom / etc properties in my animations instead of shorthand margin / padding / etc.

This comment on Angular Issue #16330 pointed me in this direction.

I know your problem is with height, but in your "false" state there is a shorthand padding property which makes me wonder if that is what Edge and Firefox are being hung up on.

For example, instead of: 

state(
  "false",
  style({
    height: "0",
    display: "none",
    padding: "0",       <------
    overflow: "hidden"
  })
)

..maybe try: 

state(
  "false",
  style({
    height: "0",
    display: "none",
    paddingTop: "0",    <------
    paddingBottom: "0", <------
    overflow: "hidden"
  })
)

Also, display:none can have odd, if any behaviour with animations. Transitions don't take place between display: inline-block and display: none, and the element can be treated as if the initial state had never occurred and the element was always in its final state.

Perhaps instead of your states being "true" and "false", you could use '*' and 'void' with an *ngIf in your template if it makes sense for your application.

It may require some refactoring, but the intention behind display:none can sometimes be the same as state('void'). Then instead of letting the css decide what is present in the DOM, Angular is doing it with void and *ngIf, and you can avoid the css display behaviour all together.

Angular 'void' state documentation.

Additional 'void' clarification under Parameters > name.

Sorry if this answer is a bit vague, but these points helped me solve similar issues. Hopefully they can point someone else in the right direction.

Upvotes: 7

Related Questions