Maison >interface Web >tutoriel CSS >Comment faire fonctionner les transitions CSS avec ngIf dans Angular 2 ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-10-31 21:17:291069parcourir

How to Make CSS Transitions Work with ngIf in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn