jquery addclass之后的css转换

Posted 2023-03-06

【中文标题】jquery addclass之后的css转换

【英文标题】：css transition after jquery addclass

【发布时间】：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 行，但动画仍然没有出现

【参考方案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>