Angular2 animated [hidden] element

Question

I have a sidebar that I am showing / hiding using a boolean like this:

[hidden]='toggleSidebar'

I have been trying to find the correct way to add a transition to this element, but so far have been only partially successful using this method : [class.show]='!toggleSidebar'. Applying css styles to this class only partially works though.

How do I add a slide-in or fade-in animation to an element containing a router-outlet such as this?

<aside [hidden]="toggleSidebar">
  <router-outlet name="aside"></router-outlet>
</aside>

Answer 1

Using the [hidden] attribute you just can't achieve a transition/animation effect since there are no subsequent step changes but only state changes which reflect either the element is visible or hidden.

What you can do is use opacity and visibility.

<aside class="sidebar" [style.opacity]="toggleSidebar ? '0' : '1'" [style.visibility]="toggleSidebar ? 'hidden' : 'visible'">
  <router-outlet name="aside"></router-outlet>
</aside>

Provide a transition timing for the sidebar for state changes.

.sidebar {
  transition: all .3s;
}

NOTE: Its better to avoid the [hidden] attribute if you look forward to support Internet Explorer 9 and 10. :)