使用CSS转换为bootstrap列

Question

我非常喜欢使用CSS和非常新的CSS转换。

我们有两个这样的兄弟div：

<div ng-class="rightSidebarOpen ? 'col-sm-8' : 'col-sm-10 col-sm-offset-1'>

</div>

<div ng-class="rightSidebarOpen ? 'col-sm-4' : 'hidden'>

</div>

所以当rightSidebarOpen布尔值切换为true时，css会改变，右侧边栏变得可见;同样，当rightSidebarOpen切换为false时，右侧边栏变为隐藏。

但是，过渡速度非常快，不是用户友好的。在给定情况的情况下，如何使用简单的CSS过渡来“打开”和“关闭”右侧边栏？不知道怎么做！