Modules d'animation

Il y a deux modules d'animation au sein d'Angular :

• @angular/animations
• @angular/platform-browser

Lorsque vous créez un projet avec la CLI, ces dépendances sont importées de base à votre projet.

Sinon importez BrowserAnimationsModule :

1
2
3
4
5
6
7
8
9
10
11
12
13
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  declarations: [ ],
  bootstrap: [ ]
})
export class AppModule { }

Fonctions d'animation

Pour utiliser des fonctions d'animations dans vos composants, importez-les depuis @angular/animations :

1
2
3
4
5
6
7
8
9
import { Component, HostBinding } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // ...
} from '@angular/animations';

Métadonnées d'animation

Dans votre composants, ajoutez la propriété animations: [] dans le décorateur @Component() :

1
2
3
4
5
6
7
8
@Component({
    selector: 'app-your',
    templateUrl: 'app.your.html',
    styleUrls: ['app.your.css'],
    animations: [
      // animation triggers go here
    ]
  })

C'est ici que se trouvera tout le code de votre animation.

Transition

Vous pouvez animer un élément HTML avec des transitions simples qui utiliseront des attributs CSS.

Utilisez la fonction state() pour qu'à la fin de chaque transition un nouvel état soit appelé. Cette fonction prend deux arguments :

• Un nom d'état
• Une fonction style

Utilisez la notation camelCase pour les attributs de style qui contiennent des tirets au sein de la fonction style()

La fonction state() avec la fonction style() :

1
2
3
4
5
6
// ...
state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),

1
2
3
4
5
state('closed', style({
    height: '100px',
    opacity: 0.8,
    backgroundColor: 'blue'
  })),

Selon l'état 'open' ou 'close' l'élément HTML aura une height, opacity et backgroundColor différentes.

Le Timing de transition

Pour que l'animation soit moins brute, vous devez implémenter une transition d'animation pour spécifier ce qui se produit entre les deux états.

La fonction transition() prend deux paramètres :

• Une instruction du sens qui définit la direction entre deux états de transition
• Une fonction animate()

La fonction animate

La fonction animate() accepte des paramètres timings et styles.

timings peut être soit un nombre, soit une string en trois parties.

1
animate(duration)

1
animate ('duration delay easing')

Duration est obligatoire et peut être exprimée comme suit :

• En tant que nombre, en millisecondes : 100
• En chaîne, en millisecondes : '100ms'
• En chaîne, en secondes : '0.1s'

Delay, le deuxième argument a la même syntaxe que duration.

Le troisième argument easing, contrôle l'accélération et la décélèration de l'animation exprimée en chaîne :

• ease-in pour commencer lentement et terminer à pleine vitesse
• ease-in-out pour démarrer lentement, accélérer au milieu, puis décélérer lentement à la fin
• ease-out pour démarrer rapidement et décélérer lentement jusqu'à un point de repos

1
2
3
transition('open => closed', [
  animate('1s 100ms ease-out')
]),

styles est le deuxième paramètre (facultatif) de la fonction animate. Il permet d'appliquer du CSS uniquement pendant la transition :

1
2
3
4
5
transition ('* => open', [
  animate ('1s',
    style ({ opacity: '*' }),
  ),
])

Dans cet exemple, on remarque l'opérateur => qui indique une transition unidirectionnelle. vous pouvez aussi utilisez l'opérateur bidirectionelle <=>

Déclencher l'animation

Une animation nécéssite d'être déclenchée pour commencer. La fonction trigger() collecte les états et transition, donne un nom à l'animation afin de l'attacher à un élément HTML déclencheur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@Component({
    selector: 'app-open-close',
    animations: [
      trigger('openClose', [

        state('open', style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow'
        })),
        state('closed', style({
          height: '100px',
          opacity: 0.8,
          backgroundColor: 'blue'
        })),
        transition('open => closed', [
          animate('1s')
        ]),
        transition('closed => open', [
          animate('0.5s')
        ]),
      ]),
    ],
    templateUrl: 'open-close.component.html',
    styleUrls: ['open-close.component.css']
  })
  export class OpenCloseComponent {
    isOpen = true;
  
    toggle() {
      this.isOpen = !this.isOpen;
    }
  
  }

1
2
3
4
5
6
7
<nav>
    <button type="button" (click)="toggle()">Toggle Open/Close</button>
</nav>

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

Dans cet exemple, lorsque isOpen est évaluée à 'open' ou 'closed' cela active le déclencheur openClose.

Conclusion

Dans cet article, vous avez appris à créer une animation de transition entre deux états. Cependant il y a des fonctionnalités plus avancées pour créer des animations Angular que vous verrez dans un prochain article.

J'espère que cela vous aidera, n'hésitez pas à laisser un commentaire !