• 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';  
  }
}

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

src/app/triangle/triangle.component.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
 
@Component({
  selector: 'app-triangle',
  templateUrl: './triangle.component.html',
  styleUrls: ['./triangle.component.scss'],
  animations: [
    trigger('result', [
      state('disable', style({
        backgroundColor: 'white',        
      })),
      state('enable', style({
        backgroundColor: 'blue',
      })),
      transition('disable => enable', [
        animate('4s')
      ]),
      transition('enable => disable', [
        animate('4s')
      ])
    ])
  ]
})
export class TriangleComponent implements OnInit {
  base = new FormControl('');
  height = new FormControl('');
  area = new FormControl('');
  isVisible = false;
  constructor() { }
 
  ngOnInit(): void {
  }
 
  onCalcButtonClick() {
    this.isVisible = true;
    let area = this.calcTriangleArea(this.base.value, this.height.value);
    this.area.setValue(area);
  }
  onDeleteButtonClick() {
    this.isVisible = false;
    this.base.setValue('');
    this.height.setValue('');
    this.area.setValue('');
  }
  calcTriangleArea(base: number, height: number) {
    return base * height / 2;
  }
}

src/app/triangle/triangle.component.html

<div class="triangleForm">
    <div class="mt-3">
        <label for="base" 
        class="form-label">Alap</label>
        <input type="text" [formControl]="base"
        id="base" class="form-control">
    </div>
    <div class="mt-3">
        <label for="height" 
        class="form-label">Magasság</label>
        <input type="text" [formControl]="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" [formControl]="area"
        id="area" class="form-control">
    </div>
</div>

A teljes projekt a GitHubon:

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

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