Comment animer des éléments contrôlés par ngIf dans Angular 2 ?

Angular 2 ngIf et Transitions/Animations CSS

Cette question approfondit les défis liés à l'exécution de transitions ou d'animations CSS sur des éléments manipulés par ngIf directive dans Angular 2.

Problème

Le but est d'animer l'entrée d'un élément par la droite en utilisant CSS. Cependant, lorsque ngIf est utilisé pour masquer initialement l'élément, la transition ne se déclenche pas.

Solution

Le problème clé réside dans le comportement de ngIf. Lorsque l'expression associée à ngIf devient fausse, l'élément est supprimé du DOM. Étant donné que les transitions et les animations nécessitent que l'élément soit présent dans le DOM, les appliquer à un élément qui n'est pas rendu ne fonctionnera pas.

Pour résoudre ce problème, il est suggéré d'utiliser Hidden au lieu de ngIf pour masquer le élément initialement.

Solution mise à jour (Angular 4.1.0 et supérieur)

Dans Angular 4.1.0 et versions ultérieures, l'approche préférée consiste à utiliser des animations angulaires. Voici une solution mise à jour utilisant des animations :

<code class="typescript">import { trigger, style, animate, transition } from '@angular/animations';

// ...

@Component({
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({ transform: 'translateX(100%)', opacity: 0 }),
          animate('500ms', style({ transform: 'translateX(0)', opacity: 1 }))
        ]),
        transition(':leave', [
          style({ transform: 'translateX(0)', opacity: 1 }),
          animate('500ms', style({ transform: 'translateX(100%)', opacity: 0 }))
        ])
      ]
    )
  ]
})

// ...

<div *ngIf="show" [@enterAnimation]></div></code>

Cette solution ajoute un déclencheur au composant appelé « enterAnimation » et définit des transitions pour les états d'entrée et de sortie. La transition inclut un style pour la transformation et l'opacité, permettant à l'élément de glisser depuis la droite avec une animation.

N'oubliez pas que cette solution est applicable pour Angular 4.1.0 et supérieur. Pour les anciennes versions, l'utilisation de l'option cachée reste l'approche recommandée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!