Angular - Animáció

• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Szerkesztve: 2025
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

src/app/app.config.ts

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 
 
//...
 
export const appConfig: ApplicationConfig = {
  providers: [
    //...
    provideAnimationsAsync()   // <--
  ]
};

Abban a komponensben ahol az animációt szeretnénk használni:

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    // animációs utasítások
  ]
})

Készítsünk egy trigger-t, egyelőre üresen:

  animations: [
    trigger('result', [
      state('', style({})),
      state('', style({})),
      transition('', []),
      transition('', [])
    ])
  ]

<p [@triangle]="doboz">triangle works!</p>
 
<button (click)="mehet()">
  Mehet
</button>

import { Component } from '@angular/core';
// import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { 
  animate, 
  state, 
  style, 
  transition, 
  trigger 
} from '@angular/animations';
 
@Component({
  selector: 'app-triangle',
  standalone: true,
  imports: [],
  animations: [
    trigger('triangle', [
      state('egy', style({
        backgroundColor: 'red',
      })),
      state('ketto', style({
        backgroundColor: 'green',
      })),
      transition('egy => ketto', [
        animate('4s')
      ])
    ])    
  ],
 
  templateUrl: './triangle.component.html',
  styleUrl: './triangle.component.css'
})
export class TriangleComponent {
 
  doboz = 'egy';
 
 
  mehet() {
    this.doboz = 'ketto';  
  }
}

src/app/app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
 
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    provideAnimationsAsync()   //<--
  ]
};

Szeretnénk az eredményt animáltan megjeleníteni.

src/app/triangle/triangle.component.ts

import { Component } from '@angular/core';
import { 
  animate, 
  state, 
  style, 
  transition, 
  trigger 
} from '@angular/animations';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 
@Component({
  selector: 'app-triangle',
  standalone: true,
  imports: [ReactiveFormsModule],
  animations: [
    trigger('result', [
      state('disable', style({
        backgroundColor: 'white',
      })),
      state('enable', style({
        backgroundColor: 'blue',
      })),
      transition('disable => enable', [
        animate('4s')
      ]),
      transition('enable => disable', [
        animate('4s')
      ])
    ])    
  ],
 
  templateUrl: './triangle.component.html',
  styleUrl: './triangle.component.css'
})
export class TriangleComponent {
 
  constructor(private builder: FormBuilder) {}
 
  triangleForm = this.builder.group({
    base: '',
    height: '',
    area: ''
  })
 
  isVisible = false;  
 
  onCalcButtonClick() {
    this.isVisible = true;
    let area = this.calcTriangleArea(
      Number(this.triangleForm.value.base),
      Number(this.triangleForm.value.height)
    );
    this.triangleForm.patchValue({area: String(area)});
  }
  onDeleteButtonClick() {
    this.isVisible = false;
    this.triangleForm.reset();
  }
  calcTriangleArea(base: number, height: number) {
    return base * height / 2;
  }
}

src/app/triangle/triangle.component.html

<form class="triangleForm" [formGroup]="triangleForm">
  <div class="mt-3">
      <label for="base" 
      class="form-label">Alap</label>
      <input type="text" formControlName="base"
      id="base" class="form-control">
  </div>
  <div class="mt-3">
      <label for="height" 
      class="form-label">Magasság</label>
      <input type="text" formControlName="height"
      id="height" class="form-control">
  </div>
 
  <div class="mt-3">
      <button class="btn btn-primary me-2" (click)="onCalcButtonClick()">Számít</button>
      <button class="btn btn-primary" (click)="onDeleteButtonClick()">Töröl</button>
  </div>
 
  <div class="mt-3 p-1" [@result]="isVisible ? 'enable' : 'disable'">
      <label for="area" 
      class="form-label">Terület</label>
      <input type="text" formControlName="area"
      id="area" class="form-control">
  </div>
</form>

A teljes projekt a GitHubon:

• https://github.com/oktat/angularanimation.git

• https://angular.io/guide/animations (2023)