import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  animations: [
    trigger('openClose', [
      state('open', style({ height: '80px', opacity: 1 })),
      state('closed', style({ height: '0px', opacity: 0 })),
      transition('open <=> closed', [animate('200ms ease-in-out')])
    ])
  ],
  template: `
    <h3>Animations</h3>
    <button (click)="open = !open">Toggle</button>
    <div [@openClose]="open ? 'open' : 'closed'" style="overflow:hidden;background:#e3f2fd;margin-top:8px">Panel</div>
  `
})
class App { open = true; }

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

                    

<app-root></app-root>