Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

La base des animations

Les animations dans Angular permettent de créer des animations fluides entre différents états de vos composants. Imaginez un menu burger qui s'ouvre et se ferme progressivement, ou une carte qui s'agrandit doucement pour afficher plus de détails - ce sont des exemples parfaits de transitions !

Avant tout: mise en place des animations

Si vous n'avez pas encore installé Angular Animations, vous pouvez le faire avec la commande suivante (vous pouvez le vérifier dans le fichier package.json)

bash
ng add @angular/animations

Ensuite, allez dans le fichier app.config.ts et ajoutez dans la liste des providers:

ts
import { AppComponent } from './app/app.component';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
    providers: [
        provideAnimationsAsync()
    ]
});

Charger les animations dès le chargement de l'application

Si vous avez besoin d'animations dès le chargement de votre application, vous devrez utiliser le module d'animations chargé immédiatement plutôt que de manière asynchrone. Pour cela, importez provideAnimations depuis @angular/platform-browser/animations et utilisez-le à la place de provideAnimationsAsync :

Exemple complet

Commençons par créer un composant qui gère l'ouverture et la fermeture d'un panneau.

ts
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-panel',
  standalone: true,
  template: `
    <div [@openClose]="isOpen ? 'open' : 'closed'" class="panel">
      <p>{{ isOpen ? 'Panel ouvert' : 'Panel fermé' }}</p>
    </div>
    <button (click)="toggle()">Toggle</button>
  `,
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: '#f0f0f0'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: '#cccccc'
      })),
      transition('open => closed', [
        animate('0.3s ease-in-out')
      ]),
      transition('closed => open', [
        animate('0.5s ease-out')
      ])
    ])
  ]
})
export class PanelComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

Pour apprendre à utiliser les animations, il faut comprendre les quatre concepts suivants : les déclencheurs, les états, les styles et les transitions.

Les déclencheurs (trigger)

ts
trigger('openClose', [
    // ... états ...
])

Un déclencheur est un nom qui identifie une animation. Ici, nous avons choisi openClose. C'est un nom qui doit être unique dans votre application. Nous l'appliquons ensuite à notre composant avec la directive @openClose:

html
<div [@openClose]="isOpen ? 'open' : 'closed'" class="panel">
    <p>{{ isOpen ? 'Panel ouvert' : 'Panel fermé' }}</p>
</div>

A savoir

Mettez un @ devant le nom du déclencheur dans votre template. Comme pour les directives, vous pouvez le rendre dynamique avec la syntaxe des [] autour du nom du déclencheur.

Les états (state)

ts
trigger('openClose', [
  state('open', ...),
  state('closed', ...)
])

Les états sont les différentes formes que peut prendre un composant. Ici, nous avons deux états : open et closed. C'est une manière de dire "quand je suis dans l'état open, je veux que mon composant ressemble à ceci, et quand je suis dans l'état closed, je veux que mon composant ressemble à cela".

Le style (style)

ts
trigger('openClose', [
  state('open', style({
    // ... propriétés ...
  })),
  state('closed', style({
    // ... propriétés ...
  }))
])

Le style est un objet qui définit les propriétés CSS que vous voulez animer. Par exemple, si vous voulez animer la hauteur et la transparence de votre composant, vous pouvez faire:

ts
state('open', style({
  height: '200px',
  opacity: 1
}))

Ecrire en camelCase

Les propriétés CSS sont écrites en camelCase dans Angular. Par exemple, background-color est écrit backgroundColor.

Les transitions

ts
trigger('openClose', [
  // ... états ...
  transition('open => closed', [
    animate('0.3s ease-in-out')
  ]),
  transition('closed => open', [
    animate('0.5s ease-out')
  ])
])

Les transitions sont les liens entre les états. Elles définissent comment passer d'un état à un autre. Ici, nous avons deux transitions :

  • open => closed : transition de l'état open à l'état closed
  • closed => open : transition de l'état closed à l'état open

SYNTAXE DES DURÉES

Vous pouvez spécifier les durées de plusieurs façons :

  • En millisecondes : animate(300)
  • En secondes : animate('0.3s')
  • Avec un délai : animate('0.3s 100ms')

TIP

Pour des animations plus complexes, vous pouvez utiliser des keyframes.

ts
transition('closed => open', [
  animate('0.5s', keyframes([
    style({ opacity: 0, offset: 0 }),
    style({ opacity: 0.5, offset: 0.3 }),
    style({ opacity: 1, offset: 1.0 })
  ]))
])

PERFORMANCE

Évitez d'animer des propriétés coûteuses en performance comme width ou height. Préférez transform quand c'est possible :

ts
state('open', style({
  transform: 'scale(1.2)',
  opacity: 1
}))

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !