title: Angular Animation not transitioning in IE11 and Firefox (works in Chrome)
body: <p>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</p>
  
  <p>The height increases, however there is no animation transition happening in IE and Firefox.</p>
  
  <p>animations.ts</p>
  
  <pre><code>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 =&gt; false", animate("1s 100ms ease-out")),
        transition("false =&gt; true", animate("1s ease-in"))
      ]),
      trigger("fadeInTrigger", [
        state(
          "true",
          style({
            opacity: "1"
          })
        ),
        state(
          "false",
          style({
            opacity: "0"
          })
        ),
        transition("true =&gt; false", animate("1s ease")),
        transition("false =&gt; true", animate("1s 300ms ease"))
      ])
    ]
  };
  </code></pre>
  
  <p>content.component.html</p>
  
  <pre><code>&lt;div
  [@expansionTrigger]="isExpanded === 'true' ? 'true' : 'false'"
  [@fadeInTrigger]="isExpanded === 'true' ? 'true' : 'false'"
  class="ds-u-sans"&gt;
      &lt;div class="padding-20"&gt;
          &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>content.component.ts</p>
  
  <pre><code>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";
  
  }
  </code></pre>