How to Make CSS Transitions Work with ngIf in Angular 2?

ngIf and CSS Transition/Animation in Angular 2

Question:

When utilizing ngIf to display a div in Angular 2, why won't CSS transitions work if the element is initially hidden?

Answer:

ngIf removes the element from the DOM when its condition becomes false. However, transitions cannot be applied to non-existent elements.

Solution:

For a smooth transition, use [hidden] instead of [ngIf]:

<code class="typescript"><div class="note">
<p>This way, the element remains in the DOM and transitions can be applied when its show property changes.</p>
<h2 id="Updated-Solutions-with-Angular-Animations">Updated Solutions with Angular Animations</h2>
<p>In Angular 4.1.0 and 2.1.0, Angular Animations provide an improved way to achieve transitions with ngIf.</p>
<p><strong>Angular 4.1.0 and Later:</strong></p>
<pre class="brush:php;toolbar:false"><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:

This approach uses the animate() helper that was introduced in 2.1.0. Refer to the Angular animations documentation for more details.