Почему моя анимация развертывания/свертывания «прыгает»? ⇐ CSS

[Anonymous]

Я работаю над проектом Angular 17 с боковой панелью в стиле CSS Tailwind.
Функция развертывания/свертывания работает как и предполагалось, но анимация не такая плавная, как хотелось бы. В анимации наблюдается заметный «скачок», который нарушает плавный переход, к которому я стремлюсь. В идеале анимация должна плавно переходить сверху вниз (и наоборот) без сбоев.
Демонстрация проблемы: https://i.imgur .com/4RpEwYv.gif
Мой HTML-код:




@for (group of navigation; track $index) {





{{ group.category }}

{{ group.description }}







@for (page of (expandedGroups[group.category] ? group.pages : group.pages.slice(0, 3)); track $index) {




{{ page.title }}

}



}





Код TypeScript с частью анимации Angular:
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [
NgOptimizedImage,
RouterLink,
FaIconComponent,
],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss',
animations: [
trigger('expandCollapse', [
state('collapsed', style({
height: '86px',
overflow: 'hidden',
opacity: 1
})),
state('expanded', style({
height: '*',
overflow: 'hidden',
opacity: 1
})),
transition('expanded => collapsed', [
style({ height: '*' }),
animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)',
style({ height: '96px' })
)
]),
transition('collapsed => expanded', [
style({ height: '96px' }),
animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)',
style({ height: '*' })
)
])
])
]
})
export class DashboardComponent {
// it is filled, but commented out
navigation = []

expandedGroups: { [key: string]: boolean } = {};

toggleGroup(category: string) {
this.expandedGroups[category] = !this.expandedGroups[category];
}

constructor() {
this.navigation.forEach(group => {
this.expandedGroups[group.category] = false;
});
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... on-jumping