jquery - 关闭侧滑菜单时无法获得过渡效果

Question

我在关闭侧边菜单时遇到过渡效果问题，不确定如何让它正常工作。看起来它应该工作，但它不想

$(document).ready(function() {

});

$('#Toggler').on('click', function() {
  $('#SideBarNavSlide').toggleClass("SideBarNavSlide2");
});

#SideBarNavSlide {
  width: 225px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
}

.SideBarNavSlide2 {
  width: 50px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
  -webkit-transition: width 2s;
  transition: width 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />



<div id="TheContainer" class="container-fluid" style="border:1px solid red; background-color:pink;padding:0; margin-top:0px;">
  <div id="headerMenu" style="width:100%!important;height:35px;background-color:cyan;">
    <button id="Toggler" style="margin-left:10px; margin-top:4px;"><span class="glyphicon glyphicon-plus"></span></button>
  </div>
  <div id="SideBarNavSlide">
  </div>
  <div id="ContentArea" style="float:right; border:1px solid white; background-color:purple; width:100%; height:100%; position:fixed; margin-left:225px!important;">
    <div class="row">
      <div class="col-md-12 col-lg-12" style="border:1px solid black; background-color:yellow; position:fixed;height:100%; width:100%; margin-left:20px!important">
      </div>
    </div>
  </div>
</div>

Answer 1

id 比类更具体并且优先级更高..所以你只需要使用 #SideBarNavSlide.SideBarNavSlide2{ 而不是 .SideBarNavSlide2{

$(document).ready(function() {
  $('#Toggler').on('click', function() {
    $('#SideBarNavSlide').toggleClass("SideBarNavSlide2");
  });
});

#SideBarNavSlide{
  width: 225px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
}

#SideBarNavSlide.SideBarNavSlide2{
  width: 50px;
  float: left;
  position: fixed;
  background-color: cornflowerblue;
  height: 100%;
  -webkit-transition: width 2s;
  transition: width 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />



<div id="TheContainer" class="container-fluid" style="border:1px solid red; background-color:pink;padding:0; margin-top:0px;">
  <div id="headerMenu" style="width:100%!important;height:35px;background-color:cyan;">
    <button id="Toggler" style="margin-left:10px; margin-top:4px;"><span class="glyphicon glyphicon-plus"></span></button>
  </div>
  <div id="SideBarNavSlide" class="anotherClass">
  </div>
  <div id="ContentArea" style="float:right; border:1px solid white; background-color:purple; width:100%; height:100%; position:fixed; margin-left:225px!important;">
    <div class="row">
      <div class="col-md-12 col-lg-12" style="border:1px solid black; background-color:yellow; position:fixed;height:100%; width:100%; margin-left:20px!important">
      </div>
    </div>
  </div>
</div>