关闭侧面滑动菜单时无法获得过渡效果

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>

Answer 2

类比ID的优先级较小，因此您应该使用#SideBarNavSlide.SideBarNavSlide2而不是.SideBarNavSlide2。此外，将过渡应用于初始状态以使其在两个方向上工作。

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

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

<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>

顺便考虑使用更少的内联样式。