Voici quelques titres possibles : 1. Comment faire fonctionner les transitions CSS avec `ngIf` dans Angular 2 ? 2. Pourquoi `ngIf` interrompt-il mes transitions CSS dans Angular 2 ? 3. Angular 2 : Combiner des animations `ngIf` et CSS pour une transmission fluide

Transitions/animations ngIf et CSS pour Angular 2

Comment faire glisser un div depuis la droite en utilisant CSS dans Angular 2 ?

<code class="html"><div class="note" [ngClass]="{'transition':show}" *ngIf="show">
  <p> Notes</p>
</div>
<button class="btn btn-default" (click)="toggle(show)">Toggle</button></code>

.transition{
  -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ;
  -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  margin-left: 1500px;
  width: 200px;
  opacity: 0;
}

.transition{
  opacity: 100;
  margin-left: 0;
}

Si vous utilisez simplement [ngClass] pour changer de classe et profiter de l'opacité, ce code fonctionne correctement. Mais je ne veux pas que cet élément soit rendu depuis le début, donc je le "cache" d'abord avec ngIf, mais la transition ne fonctionnera pas.

Mise à jour 4.1.0

Utilise l'API d'animation de transition, plus besoin d'utiliser [hidden] ou [*ngIf Hidden].

Mise à jour 2.1.0

Afficher l'animation sur angulaire.io

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

@Component({
  selector: 'my-app',
  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}))
        ])
      ]
    )
  ],
  template: `
    <button (click)="show = !show">toggle show ({{show}})</button>

    <div *ngIf="show" [@enterAnimation]>xxx</div>
  `
})
export class App {
  show:boolean = false;
}</code>

Réponse originale

Lorsque l'expression devient fausse, *ngIf supprimera l'élément du DOM. Un élément inexistant ne peut pas faire l'objet d'une transition.

peut être remplacé par l'attribut caché :

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

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!