[[oktatas:web:angular|< Angular]]

====== Angular - Animáció ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Animációkról =====

Két fő Angular modult használunk:
  * @angular/animations
  * @angular/platform-browser


<code javascript src/app/app.module.ts>
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

//...

  imports: [
    BrowserAnimationsModule
  ],
</code>


===== Függvények importálása =====

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


===== Az animáció helye =====

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


===== Átmenet animálása =====


<code javascript>
  animations: [
    trigger('result', [
      state('', style({})),
      state('', style({})),
      transition('', []),
      transition('', [])
    ])
  ]
</code>


===== Teljes kód =====


<code javascript 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;
  }
}
</code>


<code html 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>

</code>

A teljes projekt a GitHubon:
  * https://github.com/oktat/angularanimation.git


===== Link =====
  * https://angular.io/guide/animations (2023)