Jassif Team Institution

அடிப்படை அனிமேஷன் அமைப்பு

import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  animations: [
    trigger('openClose', [
      state('open', style({ opacity: 1 })),
      state('closed', style({ opacity: 0 })),
      transition('open <=> closed', [animate('200ms ease-in-out')])
    ])
  ]
})
class App {}

டெம்ப்ளேட் பயன்பாடு

<div [@openClose]="open ? 'open' : 'closed'">...</div>

toggle() { this.open = !this.open; }

முழுமையான எடுத்துக்காட்டு

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

import { animation, style, animate, useAnimation } from '@angular/animations';

// மீண்டும் பயன்படுத்தக்கூடிய அனிமேஷன் வரையறை
export const fadeIn = animation([
  style({ opacity: 0 }),
  animate('{{time}} ease-out', style({ opacity: 1 }))
]);

// கூறு trigger-இல்:
// transition(':enter', [ useAnimation(fadeIn, { params: { time: '200ms' } }) ])

அனிமேஷன் வழங்குநர்கள்

import { provideAnimations, provideNoopAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(App, { providers: [provideAnimations()] });
// சோதனைகள் அல்லது தவிர்ப்பு:
// bootstrapApplication(App, { providers: [provideNoopAnimations()] });