jquery addclass之后的css转换答案

【问题标题】：css transition after jquery addclassjquery addclass之后的css转换
【发布时间】：2018-07-26 10:50:11
【问题描述】：

在我用 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>

【问题讨论】：

问题是由于您使用了display: table-cell，您不能轻易地修改单元格宽度，当然也不能修改动画。您使用该规则是否有特定原因？
当我想要 1 个 div 100% 和其他 50 px 时，这是我能想到的最简单的方法。你知道更好的方法吗？这东西有效，只是动画不行
所以你想让一个 div 填满整个屏幕，而其他 div 在屏幕外逐渐对齐 50px？
不，它可以按目前的尺寸工作。不活动的 div 每个填充 50 像素，活动的 div 填充其余空间。
我也试过 .active { width:calc(100% - 150px); } . 滑块 { 显示：内联块；并且它们都适合 1 行，但动画仍然没有出现

标签： jquery jquery-animate css-transitions

【解决方案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>

【讨论】：