Bootstrap邊欄過渡不起作用

我對Bootstrap邊欄有以下HTML，但無法使「推送」過渡工作。無論何時我觸發JavaScript，邊欄都會在兩種狀態之間切換。我將正確的過渡CSS放在正確的元素上嗎？Bootstrap邊欄過渡不起作用

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><a href="#"><i class="glyphicon glyphicon-stats"></i> <span class="collapse in hidden-xs">Work in progress</span></a></li> 
       <li><a href="#"><i class="glyphicon glyphicon-th-list"></i> <span class="collapse in hidden-xs">Management information</span></a></li> 
       <li><a href="#"><i class="glyphicon glyphicon-user"></i> <span class="collapse in hidden-xs">Member access</span></a></li> 
       <li><a href="#"><i class="glyphicon glyphicon-dashboard"></i> <span class="collapse in hidden-xs">Membership statistics</span></a></li> 
      </ul> 

      <ul class="nav" id="logout"> 
      <li><a href="#"><i class="glyphicon glyphicon-share"></i> <span class="collapse in hidden-xs">Logout</span></a></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'); 
}); 

})

來源

2017-02-10 Mike

過渡應該已經應用到#sidebar元素

來源

2017-02-10 11:33:55 Mike

Bootstrap邊欄過渡不起作用

回答

相關問題