transitions/animations ngIf et CSS dans Angular 2

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

  
 Notes

Toggle

.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;
}

Ce code fonctionne correctement si vous utilisez simplement [ngClass] pour changer de classe et profiter de l'opacité. 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.

La mise à jour 4.1.0

utilise l'API d'animation de transition, il n'est plus nécessaire d'utiliser [hidden] ou [*ngIf Hidden].

Mise à jour 2.1.0

Afficher l'animation sur angulaire.io

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: `
    toggle show ({{show}})

    
xxx
  `
})
export class App {
  show:boolean = false;
}

Réponse originale

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

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