Question

我附加到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";

}

Answer 1

不知道您是否已经找到解决方案，或者这是否真的可以帮助您解决特定的情况，但是我遇到了类似的问题，并通过使用显式marginTop / paddingBottom /等来解决动画中的属性，而不是速记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使用void和*ngIf来做，而不是让CSS决定DOM中存在什么，而您可以一起避免CSS display的行为。

Angular 'void' state documentation.

Additional 'void' clarification under Parameters > name.

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

Angular Animation在IE11和Firefox中不转换（在Chrome中可用）

1 个答案: