I am facing a challenge with a dynamic container that expands and shrinks. Inside this container, there is an element that should fade in when the container expands and fade out when it shrinks.
The Issue I'm Facing
- When the container expands, both element animations work smoothly.
- However, when the container shrinks, only the container animation is triggered.
- If I eliminate the container expansion animation, then the fade in/out animations function as intended.
How can I ensure that all animations run simultaneously in both expand and shrink scenarios?
Note: I am deliberately using ngIf, as it removes the element at the end of the animation sequence.
Check out the current state of the project on Plunkr: https://embed.plnkr.co/TXYoGf9QpErWmlRvQF9Z/
The component class:
export class App {
expanded = true;
toggleExpandedState() {
this.expanded = !this.expanded;
}
constructor() {
}
}
The template:
<div class="container" [@expansionTrigger]="expanded">
<div class="constant-item"></div>
<div class="fade-item" [@stateAnimation] *ngIf="expanded"></div>
</div>
<button (click)="toggleExpandedState()">Toggle Fade</button>
And here is the component animation code:
trigger('expansionTrigger', [
state('1', style({
width: '250px'
})),
state('0', style({
width: '160px'
})),
transition('0 => 1', animate('200ms ease-in')),
transition('1 => 0', animate('200ms ease-out'))
]),
trigger('stateAnimation', [
transition(':enter', [
style({
opacity: 0
}),
animate('200ms 350ms ease-in', style({
opacity: 1
}))
]),
transition(':leave', [
style({
opacity: 1
}),
animate('1s', style({
opacity: 0
}))
])
])