Bootstrap stoppt Animation funktioniert

Question

Ich versuche, Sidebar-Komponente in meinem Web-Anwendung mit einfacher Animation zu erstellen.

.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; 
} 

Das ist mein getrennt Modul:

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

sieht gut aus, aber in der gesamten Anwendung verwende ich Bootstrap, und dann Sidebar nicht mehr funktioniert. Was muss ich in Bootstrap-Stilen ändern, um diese Funktionalität zu reparieren?

JSfiddle mit Bootstrap:

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

Answer 1

Bootstrap hat eine .hidden Klasse mit display:none;, die das Problem verursacht.

außer Kraft setzen Sie einfach die display für dieses spezielle Element oder einen anderen Klassennamen verwenden:

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

Updated JSFiddle