Chrome seems to be handling my Angular animation attached to a div (where the height goes from 0 to '*') just fine. I've made sure to import all necessary polyfills and install web-animations-js.
However, when it comes to IE and Firefox, there's an issue - the height increases but there is no smooth transition for the animation.
Here's a snippet of the animations.ts file:
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"))
])
]
};
In the content.component.html file, we have:
<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>
And in 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";
}