Comment utiliser les transitions et les animations CSS avec la directive ngIf d'Angular 2 ?

Angular 2 ngIf et transition/animation CSS

La directive ngIf d'Angular 2 est couramment utilisée pour restituer conditionnellement des éléments en fonction d'une expression donnée. Cependant, lors de l'utilisation de transitions ou d'animations CSS sur ces éléments, des comportements inattendus peuvent survenir.

Considérez l'extrait de code suivant :

// ...
<div class="note" [ngClass]="{'transition':show}" *ngIf="show">
  <p> Notes</p>
</div>
// ...

Dans cet exemple, l'objectif est qu'un élément div faites glisser depuis la droite en utilisant CSS lorsque show est défini sur true. La directive *ngIf garantit que l'élément n'est rendu que lorsque show est vrai, mais lorsque show est faux, l'élément est complètement supprimé du DOM.

Le problème se pose car les animations ou transitions CSS nécessitent que l'élément cible être présent dans le DOM pendant toute la durée de l'animation. Puisque *ngIf supprime l'élément lorsque show est faux, les transitions définies dans le CSS ne prendront pas effet.

Solution :

Pour résoudre ce problème, il est recommandé d'utiliser l'attribut [hidden] au lieu de ngIf pour masquer les éléments qui doivent être animés.

// ...
<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">
  <p> Notes</p>
</div>
// ...

En utilisant [hidden], l'élément est toujours présent dans le DOM mais sa visibilité est définie sur "hidden" quand le spectacle est faux. Cela garantit que l'élément est disponible pour les animations CSS ou les transitions à appliquer.

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!