CSS宽度动画在点击选项卡时不工作

CSS width animation not working when clicking tabs

本文关键字：选项 工作 动画 CSS      更新时间：2023-09-26

下面是我正在做的事情的精简版本。基本上我有一系列的标签，当点击，显示不同的图片。当我单击选项卡时，我想要动画溢出宽度，显示.show内容。我不明白为什么东西没有动起来。仅供参考，我在Chrome中这样做。

<<p> 生活代码/strong> HTML: 

<div class="container">
  <div class="tabs">
    <ul>
      <li class="active" data-tab="1">Slide 1</li>
      <li data-tab="2">Slide 2</li>
      <li data-tab="3">Slide 3</li>
    </ul>
  </div>
  <div class="tab-wrapper">
    <div class="tab active" data-slide="1">
      <div class="overflow">
        <div class="show"></div>
      </div>
    </div>
    <div class="tab" data-slide="2">
      <div class="overflow">
        <div class="show"></div>
      </div>
    </div>
    <div class="tab" data-slide="3">
      <div class="overflow">
        <div class="show"></div>
      </div>
    </div>
  </div>
</div><!--/.container-->
CSS: 

.container {
  width:800px;
  margin:0 auto;
  background:#999999;
}
ul {
  list-style-type:none;
  display:table;
  width:100%;
}
li {
  display:table-cell;
  color:#ffffff;
}
li.active {
  color:blue;
}
.tab-wrapper {
  width:800px;
  height:300px;
  border-top:solid 20px #ffffff;
}
.tab {
  width:800px;
  height:300px;
  position:relative;
  background:#666666;
  display:none;
}
.tab.active {
  display:block;
}
.overflow {
  width:0%;
  height:100%;
  border:solid 3px red;
  overflow:hidden;
  position:relative;
  -webkit-transition:width 1s ease;
}
.tab.active .overflow {
  width:100%;
  -webkit-transition:width 1s ease;
}
[data-slide="1"] .show {
  width:800px;
  height:200px;
  top:50px;
  position:absolute;
}
[data-slide="1"] .show { background:yellow; }
[data-slide="2"] .show { background:green; }
[data-slide="3"] .show { background:blue; }

JS: 

$('.tabs li').click(function() {
  var tab = $(this).data('tab');
  var picked = $('.tab').data('slide', tab);
  $('.tabs li.active').removeClass('active');
  $('.tab.active').removeClass('active');
  $(this).addClass('active');
  $('.tab[data-slide=' + tab + ']').addClass('active');
});

CSS transition/animation 将不工作在具有display: none;属性的div。
如果div有一个具有display: none;属性的父div，它也将不起作用。

相反，你可以尝试给.tab s一个absolute值的position，并使0px的初始宽度。然后设置800px的宽度，当它有.active类。在本例中，您需要将transition应用于.tab而不是.overflowdiv。

。

尝试使用slideToggle():

$('.tab').click(
    function(){
        $(this).find('.overflow').slideToggle();
    }
);

在css中为。overflow.

提供首选的宽度和高度。
相关文章：