jQuery AddClass之后的CSS过渡

Question

我试图在使用jQuery添加活动类后慢慢扩展DIV，但我无法使其正常工作。DIV只是获得宽度，但过渡不会发生。我也尝试使用jQuery做动画，但这也没有起作用。

$(document).ready(function() {
  $('.Sliders').click(function(e) {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

#SliderHolder {
  width: 100%;
  height: 100%;
  font-size: 0px;
  position: relative;
  display: table;
  border-collapse: collapse;
}
.Sliders {
  min-width: 50px;
  height: 100%;
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  font-size: 72px;
  text-align: center;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}
.active {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Wrapper">
  <div id="SliderHolder">
    <div id="Slide1" class="Sliders active"></div>
    <div id="Slide2" class="Sliders"></div>
    <div id="Slide3" class="Sliders"></div>
    <div id="Slide4" class="Sliders"></div>
  </div>
</div>

Answer 1

您可以将width : 0%;添加到.Sliders样式，然后将过渡添加到.active类

$(document).ready(function() {
  $('.Sliders').click(function(e) {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

#SliderHolder {
  width: 100%;
  height: 100%;
  font-size: 0px;
  position: relative;
  display: table;
  border-collapse: collapse;
}
.Sliders {
  width : 0%;
  min-width: 50px;
  height: 100%;
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  font-size: 72px;
  text-align: center;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}
.active {
  width: 100%;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  background : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Wrapper">
  <div id="SliderHolder">
    <div id="Slide1" class="Sliders active">1</div>
    <div id="Slide2" class="Sliders">2</div>
    <div id="Slide3" class="Sliders">3</div>
    <div id="Slide4" class="Sliders">4</div>
  </div>
</div>