How to use transition in Angular?

Need to use module or component appraoch ( standalone)

Function for animation — trigger, state, style, animate, transition,

1. Component -

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
  providers: [provideAnimations()],

2. Module — BrowserAnimationsModule

3. Format for Animation adding

@Component({   standalone: true,  
 selector: 'app-root',   
templateUrl: 'app.component.html',  
 styleUrls: ['app.component.css'],  
   animations: [     // animation triggers go here   ] })

animations: [
    state(
      'open',
      style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow',
      })
    ),
    state(
      'closed',
      style({
        height: '100px',
        opacity: 0.8,
        backgroundColor: 'blue',
      })
    ),
    transition('closed => open', [animate('0.5s')]),
  ],