Bootstrap 停止动画工作

Question

我尝试用简单的动画在我的网络应用程序中创建侧边栏组件。

.sidebar-wrapper {
    /* some styles */
    -webkit-transition: width 0.5s ease;
    -moz-transition: width 0.5s ease;
    -o-transition: width 0.5s ease;
    transition: width 0.5s ease;
}

这是我的分离模块：

https://jsfiddle.net/pyg1oh5d/7/

看起来不错，但在整个应用程序中我使用 Bootstrap，然后侧边栏停止工作。我应该更改 Bootstrap 样式以修复此功能？

JSfiddle 与 Bootstrap：

https://jsfiddle.net/pyg1oh5d/5/

Answer 1

Bootstrap 有一个带有 display:none; 的 .hidden 类，这会导致问题。

只需覆盖此特定元素的display，或使用不同的类名：

.sidebar-wrapper.hidden {
   display: block !important;
   width: 0;
}

Updated JSFiddle