angular - Angular Animation在IE11和Firefox中不转换(在Chrome中可用)

附加到div上的我的Angular动画可以在Chrome中使用(将0的高度增加到height:'*')。我已经导入了所有必要的polyfill并安装了web-animations-js

高度增加，但是在IE和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";

}

最佳答案

不知道您是否找到了解决方案，或者这是否真的可以帮助您解决特定的情况，但是我遇到了类似的问题，并通过在动画中使用显式的marginTop / paddingBottom / etc属性(而不是简写的margin / padding /等等

This comment on 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以及元素can be treated as if the initial state had never occurred and the element was always in its final state之间不会发生过渡。

也许您的状态不是"true"和"false"，如果对您的应用程序有意义，则可以在模板中将'*'和'void'与*ngIf一起使用。

它可能需要进行一些重构，但是display:none的意图有时可以与state('void')相同。然后，Angular不用css来决定DOM中存在什么，而是使用void和*ngIf做到了这一点，并且您可以一起避免css display的行为。

Angular 'void' state documentation.

Additional 'void' clarification under Parameters > name.

抱歉，这个答案有点含糊，但是这些要点帮助我解决了类似的问题。希望他们能指出正确的方向。

关于angular - Angular Animation在IE11和Firefox中不转换(在Chrome中可用)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51427672/