Angular2 动画[隐藏]元素

我有一个侧边栏，我使用如下布尔值显示/隐藏：

[hidden]='toggleSidebar'

我一直在尝试找到向此元素添加过渡的正确方法，但到目前为止，使用此方法仅部分成功：[class.show]='!toggleSidebar'。不过，将 css 样式应用于此类只能部分起作用。

如何向包含这样的路由器出口的元素添加滑入或淡入动画？

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

使用[hidden]属性，您只是无法实现过渡/动画效果，因为没有后续步骤更改，而只有反映元素可见或隐藏的状态更改。

你能做的就是使用opacity and visibility.

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

为侧边栏提供状态更改的转换时机。

.sidebar {
  transition: all .3s;
}

NOTE: 最好避免[hidden]如果您希望支持 Internet Explorer 9 和 10，请使用属性。:)