Angular - Animáció

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

Két fő Angular modult használunk:

• @angular/animations
• @angular/platform-browser

src/app/app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
//...
 
  imports: [
    BrowserAnimationsModule
  ],

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

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

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)