I created a sidebar component that relies on the sidebarExpanded state passed through Input(). Despite the correct animation trigger upon input change, the width adjustment happens abruptly. Interestingly, the same animation code works flawlessly in another component, ruling out any potential import issues. This discrepancy is consistent across various browsers. Any insights on what might be causing this issue?
Thank you.
sidebar.component.ts
import {
animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
animations: [
trigger('collapse', [
state('false', style({ width: '0' })),
state('true', style({ width: '25rem' })),
transition('false <=> true', animate(1000)),
]),
],
})
export class SidebarComponent implements OnInit {
constructor() {}
@Input() sidebarExpanded = true;
ngOnInit(): void {}
}
sidebar.component.html
<div class="sidebar" [@collapse]="sidebarExpanded"></div>
sidebar.component.scss
.sidebar {
display: flex;
flex-direction: column;
position: fixed;
top: 8rem;
bottom: 0;
background-color: var(--color-grey-dark-4);
box-shadow: var(--shadow-dark);
}