Bootstrap sidebar transition not working - html

Question

I have the following HTML for a Bootstrap sidebar but I cannot get the "push" transition to work. Whenever I trigger the JavaScript, the sidebar just toggles between the two states. Am I putting the correct transition CSS on the correct elements?
HTML:
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="logo">
<li><a data-toggle="offcanvas" href="#"><i class="glyphicon glyphicon-option-vertical"></i> <span class="collapse in hidden-xs">
<img class="img-responsive2" src="./Pension-Solutions-185x51.png">
</span></a></li>
</ul>
<ul class="nav" id="menu">
<li><i class="glyphicon glyphicon-stats"></i> <span class="collapse in hidden-xs">Work in progress</span></li>
<li><i class="glyphicon glyphicon-th-list"></i> <span class="collapse in hidden-xs">Management information</span></li>
<li><i class="glyphicon glyphicon-user"></i> <span class="collapse in hidden-xs">Member access</span></li>
<li><i class="glyphicon glyphicon-dashboard"></i> <span class="collapse in hidden-xs">Membership statistics</span></li>
</ul>
<ul class="nav" id="logout">
<li><i class="glyphicon glyphicon-share"></i> <span class="collapse in hidden-xs">Logout</span></li>
</ul>
</div>
<!-- /sidebar -->
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<p>
PAGE CONTENT
</p>
</div>
<!-- /main -->
</div>
</div>
CSS:
#media screen and (max-width: 768px) {
#sidebar {
min-width: 44px;
}
#main {
width: 1%;
left: 0;
}
#sidebar .visible-xs {
display:inline !important;
}
.row-offcanvas {
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.row-offcanvas-left.active {
left: 45%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -45%;
position: absolute;
top: 0;
width: 45%;
}
}
#media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.row-offcanvas-left.active {
left: 3%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -3%;
position: absolute;
top: 0;
width: 3%;
text-align: center;
min-width:42px;
}
#main {
left: 0;
}
}
JavaScript:
$(document).ready(function() {
$('[data-toggle="offcanvas"]').click(function() {
$('.row-offcanvas').toggleClass('active');
$('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
});
})

Answer 1

The transition should have been applied to the #sidebar element