Angular 角度动画在IE11和Firefox中不转换（在Chrome中工作）

附加到div的我的角度动画在Chrome中工作（将a高度0增加到高度：'*'）。我已经导入了所有必要的多边形填充并安装了web动画js

高度增加，但是IE和Firefox中没有动画转换

动画.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>

---

不知道您是否已经找到了解决方案，或者这是否真的对您的特定情况有帮助，但我遇到了一个类似的问题，并通过在我的动画中使用显式的

marginTop

/

paddingBottom

/etc属性而不是速记

margin

/

padding

/etc解决了这个问题

把我引向这个方向

我知道你的问题是

高度

，但在你的

状态“false”

中有一个速记

填充

属性，这让我想知道Edge和Firefox是否就是因为这个而挂断的

例如，而不是：

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

状态(
“假”，
风格({
高度：“0”，
显示：“无”，
填充：“0”，这为我节省了大量时间，谢谢，问题在FF 64和@angular/animations 7.2.0中仍然存在
state(
  "false",
  style({
    height: "0",
    display: "none",
    padding: "0",       <------
    overflow: "hidden"
  })
)

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