API de transition d’animation 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 la transition dans Angular 10 et comment l’utiliser.

La transition dans Angular10 est utilisé pour créer une transition pour l’animation dans laquelle un élément ira de d’un état à l’autre.

Syntaxe:

transition (stateChangeExpr, steps, options)

NgModule : Le module utilisé par la transition est :

Approcher:

  • Créez l’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.
  • Faites la transition contenant stateChangeExpr, les étapes, les options pour l’animation.
  • Servez l’application angulaire en utilisant ng serve pour voir la sortie.

Paramètres:

  • stateChangeExpr : une expression booléenne qui compare la précédente et les états d’animation actuels.
  • pas: Un ou plusieurs objets d’animation renvoyés par animation.
  • choix : Un objet d’options pouvant contenir une valeur de délai pour le démarrage de l’animation

Valeur de retour :

  • AnimationTransitionMetadata : Un objet qui encapsule les nouvelles données de transition.

Exemple 1:

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': '#ff0000',

        transform: 'translateX(0)'

      })),

      state('clr1', style({

        'background-color': '#000000',

        transform: 'translateX(100px) translateY(100px) scale(0.3)'

      })),

  

      

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

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

    ])

  ]

})

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:

gfg4

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

Laisser un commentaire

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