Comment faire fonctionner les transitions CSS avec ngIf dans Angular 2 ?

ngIf et transition/animation CSS dans Angular 2

Question :

Lors de l'utilisation de ngIf pour afficher un div dans Angular 2, pourquoi les transitions CSS ne fonctionnent-elles pas si l'élément est initialement masqué ?

Réponse :

ngIf supprime l'élément du DOM lorsque sa condition devient fausse. Cependant, les transitions ne peuvent pas être appliquées à des éléments inexistants.

Solution :

Pour une transition en douceur, utilisez [hidden] au lieu de [ngIf] :

<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>

De cette façon, l'élément reste dans le DOM et les transitions peuvent être appliquées lorsque sa propriété show change.

Solutions mises à jour avec des animations angulaires

Dans Angular 4.1.0 et 2.1 .0, les animations angulaires offrent un moyen amélioré de réaliser des transitions avec ngIf.

Angular 4.1.0 et versions ultérieures :

<code class="typescript">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}))
  ])
])</code>

Angular 2.1.0 :

Cette approche utilise l'assistant animate() qui a été introduit dans la version 2.1.0. Reportez-vous à la documentation des animations angulaires pour plus de détails.

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!