transiciones/animaciones ngIf y CSS en Angular 2

¿Cómo deslizar un div desde la derecha usando CSS en 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;
}

Este código funciona bien si solo usas [ngClass] para cambiar de clase y aprovechar la opacidad. Pero no quiero que ese elemento se represente desde el principio, así que primero lo "oculto" con ngIf, pero luego la transición no funcionará.

Actualización 4.1.0

usa la API de animación de transición, ya no es necesario usar [oculto] o [*ngSi está oculto].

Actualización 2.1.0

Ver animación en angular.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;
}

Respuesta original

Cuando la expresión se vuelve falsa, *ngIf eliminará el elemento del DOM. Un elemento que no existe no se puede realizar la transición.

se puede reemplazar por el atributo oculto: