角度动画在 IE11 和 Firefox 中不转换（适用于 Chrome）

Question

我附加到 div 的 Angular 动画在 Chrome 中工作（将 0 的高度增加到高度：'*'）。我已经导入了所有必要的 polyfills 并安装了 web-animations-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"))
    ])
  ]
};

内容.组件.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";

}

Answer 1

不知道您是否已经找到了解决方案，或者这是否真的有助于您的特定情况，但我遇到了类似的问题，并通过在我的动画中使用显式marginTop/ paddingBottom/ 等属性而不是速记margin/ padding/ 等来修复它。

对 Angular Issue #16330 的评论将我指向了这个方向。

我知道你的问题是height，但在你的"false"州有一个速记padding属性让我想知道这是否是 Edge 和 Firefox 被挂断的原因。

例如，而不是：

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

..也许试试：

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

此外，display:none如果有任何动画行为，可能会有奇怪的行为。display: inline-block和之间不会发生转换display: none，并且可以将元素视为初始状态从未发生过并且元素始终处于最终状态。

也许，而不是你的状态是"true"和"false"，你可以使用'*'，并'void'与*ngIf您的模板，如果是有意义的，你的应用程序。

它可能需要一些重构，但背后的意图display:none有时可能与state('void'). 然后，不是让 css 决定 DOM 中存在的内容，而是 Angular 使用voidand来做*ngIf，你可以display一起避免 css行为。

Angular 'void' 状态文档。

参数 > 名称下的附加“无效”说明。

对不起，如果这个答案有点含糊，但这些要点帮助我解决了类似的问题。希望他们可以为其他人指明正确的方向。