Angular2 animated [hidden] element

Desired behaviour can be achieved with ngIf. From official guide:

The void state

The special state called void can apply to any animation. It applies when the element is not attached to a view, perhaps because it has not yet been added or because it has been removed. The void state is useful for defining enter and leave animations.

In example below div shows up from top of the screen when condition evaluates to true.

HTML:

<div *ngIf="panelVisible" [@panelInOut]>....</div>

TS:

 @Component({
    ....
    animations: [
        trigger('panelInOut', [
            transition('void => *', [
                style({transform: 'translateY(-100%)'}),
                animate(800)
            ]),
            transition('* => void', [
                animate(800, style({transform: 'translateY(-100%)'}))
            ])
        ])
    ]
})

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. :)