Animation de déclencheur Angular10 – GeeksforGeeks

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Dans cet article, nous allons voir ce qui se déclenche dans Angular 10 et comment l’utiliser.

La gâchette dans Angular10 est utilisé pour créer un déclencheur d’animation contenant l’état et la transition de l’animation.

Syntaxe:

animate(name | definations)

NgModule : Le module utilisé par le déclencheur est :

Approcher:

  • Créez une application angulaire à utiliser.
  • Dans app.module.ts, importez BrowserAnimationsModule.
  • Dans app.component.html, créez un div qui contiendra l’élément d’animation.
  • Dans app.component.ts, importez le déclencheur, l’état, le style, la transition, l’animation à utiliser.
  • Créez le déclencheur contenant l’état et la transition de l’animation.
  • Servez l’application angulaire en utilisant ng serve pour voir la sortie.

Paramètres:

  • Nom: Définit une chaîne d’identification.
  • définitions : Définit un objet de définition d’animation.

Valeur de retour :

  • AnimationTriggerMetadata : Un objet qui encapsule les données du déclencheur.

Exemple:

app.module.ts

import { LOCALE_ID, NgModule } 

from '@angular/core';

 

import { BrowserModule }

from '@angular/platform-browser';

import {BrowserAnimationsModule} 

from '@angular/platform-browser/animations';

import { AppRoutingModule }

from './app-routing.module';

import { AppComponent }

from './app.component';

 

@NgModule({

  déclarations : [

    AppComponent

  ],

  importations: [

    BrowserModule,

    AppRoutingModule,

    BrowserAnimationsModule

  ],

  fournisseurs: [

      { provide: LOCALE_ID, useValue: 'en-GB' },

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts

import { 

  

  trigger, 

  state, 

  style, 

  transition, 

  animate } from '@angular/animations';

import { Component } from '@angular/core';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  StyleUrl : [ './app.component.css' ],

  animations : [

  

    

    trigger('geek',[

      state('green', style({

        'background-color': 'green',

        transform: 'translateX(0)'

      })),

      state('blu', style({

        'background-color': '#49eb34',

        transform: 'translateX(0)'

      })),

      transition('green => blu',animate(1200)),

      transition('blu => green',animate(1000))

    ])

  ]

})

export class AppComponent  {

  state = 'green';

  anim(){

    this.state == 'green' ?

    this.state = 'blu' : this.state = 'green';

  }

}

app.component.html

<h1>GeeksforGeeks</h1>

<button (click)='anim()'>Animate</button>

<br>

<br>

<div

  style="width: 150px; height: 100px; border-radius: 5px;"

  [@geek]='state'>

</div>

Production:

gfg2

Référence: https://angular.io/api/animations/trigger

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *