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 with Bootstrap：

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

Answer 1

Bootstrap有一个.hidden类display:none;导致问题。

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

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

statement