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>