Angular Animation在IE11和Firefox中没有转换(适用于Chrome)

Question

附加到div的角度动画在Chrome中工作(将高度0增加到高度：'*'(。我已经导入了所有必要的polyfill并安装了网页动画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>

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/etc属性而不是简写margin/padding/etc来解决它。

这篇关于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之间不会发生转换，可以将元素视为从未发生过初始状态，并且元素始终处于其最终状态。

如果对您的应用程序有意义，您可以在模板中使用'*'和'void'以及*ngIf，而不是使用"true"和"false"。

它可能需要一些重构，但display:none背后的意图有时可能与state('void')相同。然后，Angular不再让css决定DOM中存在的内容，而是使用void和*ngIf，这样就可以同时避免cssdisplay的行为。

角度"无效"状态文档。

参数>名称下的其他"无效"说明。

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