Angular10 Animation animate() Fonction – 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 est animé dans Angular 10 et comment l’utiliser.

La animer dans Angular10 est utilisé pour ddéfinir une étape d’animation qui combine des informations de style avec des informations de synchronisation

Syntaxe:

animate(timings | styles)

NgModule : Le module utilisé par animate est :

Approcher:

  • Créer 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 l’animation en utilisant animation() contenant le timing et les styles.
  • Servir l’application angulaire en utilisant ng serve pour voir la sortie

Paramètres:

  • Horaire: Définit AnimateTimings pour l’animation parent
  • modes: Définit AnimationStyles pour l’animation parent

Valeur de retour :

  • AnimationAnimateMetadata : Un objet qui encapsule l’étape d’animation

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('gfg',[

      state('normal', style({

        'background-color': 'red',

        transform: 'translateX(0)'

      })),

      state('highlighted', style({

        'background-color': 'blue',

        transform: 'translateX(0)'

      })),

      transition('normal => highlighted',animate(1200)),

      transition('highlighted => normal',animate(1000))

    ])

  ]

})

export class AppComponent  {

  state = 'normal';

  anim(){

    this.state == 'normal'

    this.state = 'highlighted' : this.state = 'normal';

  }

}

app.component.html

<h1>GeeksforGeeks</h1>

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

<div

  style="width: 100px; height: 100px"

  [@gfg]='state'>

</div>

Production:

gfg1

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

Laisser un commentaire

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