angular 2 ngIf and CSS transition/animation

Question

I want a div to slide in from the right in angular 2 using css.

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

I works fine if i only use [ngClass] to toggle class and utilise opacity. But li don't want that element to be rendered from the beginning so I "hide" it with ngIf first, but then the transition wont't work.

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

Answer 1

update 4.1.0

Plunker

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24

update 2.1.0

Plunker

For more details see Animations at 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: `     <button (click)="show = !show">toggle show ({{show}})</button>      <div *ngIf="show" [@enterAnimation]>xxx</div>   ` }) export class App {   show:boolean = false; } 

original

*ngIf removes the element from the DOM when the expression becomes false. You can't have a transition on a non-existing element.

Use instead hidden:

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