title: Angular2 animated [hidden] element
body: <p>I have a sidebar that I am showing / hiding using a boolean like this:</p>
  
  <p><code>[hidden]='toggleSidebar'</code></p>
  
  <p>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 :
  <code>[class.show]='!toggleSidebar'</code>. Applying css styles to this class only partially works though.</p>
  
  <p>How do I add a slide-in or fade-in animation to an element containing a router-outlet such as this?</p>
  
  <pre><code>&lt;aside [hidden]="toggleSidebar"&gt;
    &lt;router-outlet name="aside"&gt;&lt;/router-outlet&gt;
  &lt;/aside&gt;
  </code></pre>