时间戳

首页 > 解决方案 > Angular Animation 在 IE11 和 Firefox 中没有过渡（在 Chrome 中工作）

angular - Angular Animation 在 IE11 和 Firefox 中没有过渡（在 Chrome 中工作）

问题描述

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

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>

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

}

标签： angulartypescriptcross-browserangular-animations

解决方案

不知道您是否找到了解决方案，或者这是否真的有助于您的特定情况，但我遇到了类似的问题，并通过在我的动画中使用显式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，并且可以将元素视为从未发生过初始状态并且元素始终处于其最终状态。

如果您的应用程序有意义，您可以在模板中使用and来代替您的状态"true"和。"false"'*''void'*ngIf

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

Angular 'void' 状态文档。

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

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

推荐阅读