Angular2 animated [hidden] element : <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>
