Animierte Höhe ohne "@Angular/Animationen" ⇐ CSS

[Anonymous]

Mit der neuesten Angular -Version wird @Angular/Animations veraltet.
Ich kämpfe mit der Migration einer Animation in meiner Anwendung. Dieses minimale Beispiel zeigt die animierte Höhe. Reproduzierbarer Code: < /h3>

Code: Select all

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()],
});