Animation d’état 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 qu’est State dans Angular 10 et comment l’utiliser.

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

Syntaxe:

State(name, style, options)

NgModule : Le module utilisé par l’État est :

Approcher:

  • Créez une application angulaire qui doit être utilisée.
  • 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 l’état contenant le nom et le style 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.
  • modes: Un ensemble de style CSS associé à l’état.
  • choix : Paramètres pouvant être passés à l’état lorsqu’il est appelé.

Valeur de retour :

  • AnimationStateMetadata : Un objet qui encapsule les nouvelles données d’état.

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('clr', style({

        'background-color': '#91fff4',

        transform: 'translateX(0)'

      })),

  

      

      state('clr1', style({

        'background-color': '#7356a8',

        transform: 'translateX(100px)'

      })),

      transition('clr => clr1',animate(1200)),

      transition('clr1 => clr',animate(1000))

    ])

  ]

})

export class AppComponent  {

  state = 'clr';

  anim(){

    this.state == 'clr'

    this.state = 'clr1' : this.state = 'clr';

  }

}

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:

gfg3

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

Laisser un commentaire

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