Моя анимация Angular, прикрепленная к div, работает в Chrome (увеличение высоты от 0 до высоты: '*'). Я импортировал все необходимые полифиллы и установил 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>
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";
}
