Анимированная высота без `@angular/анимация ⇐ CSS

[Anonymous]

С последней угловой версией @Angular/Animation устарел.
Я борюсь с мигрированием анимации в своем приложении. Этот минимальный пример показывает анимированную высоту.
Минимальный пример:
https://stackblitz.com/edit/angular-mqj ... %2fmain.ts> Что будет лучшим подходом? Воспроизводимый код: < /h3>
import 'zone.js';
import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
animate,
state,
style,
transition,
trigger,
} from '@angular/animations';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

const MY_ANIMATION = trigger('anim', [
state(
'open',
style({
height: '*',
padding: '16px',
margin: '16px 0',
})
),
state(
'closed',
style({
height: 0,
padding: '0 16px',
margin: 0,
border: 0,
})
),
transition('open closed', animate('300ms ease-in-out'), {
params: { height: '*' },
}),
]);

@Component({
selector: 'app-root',
standalone: true,
providers: [],
styles: `
p {
overflow: hidden;
}
`,
template: `
Toggle

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

`,
animations: [MY_ANIMATION],
})
export class App {
readonly isOpen = signal(false);

toggleOpen() {
this.isOpen.set(!this.isOpen());
}
}

bootstrapApplication(App, {
providers: [provideAnimationsAsync()],
});


Подробнее здесь: https://stackoverflow.com/questions/797 ... animations