Question

以下是我正在处理的一些精简版本。基本上我有一系列标签，当点击时，显示不同的图片。当我单击选项卡时，我想为溢出宽度设置动画，显示.show内容。我无法弄清楚为什么事情没有动画。仅供参考，我在Chrome中这样做。

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');
});

Answer 1

CSS transition / animation 将无效在具有display: none;属性的div中。
如果该div具有display: none;属性的父级，则无效。

相反，您可以尝试向position提供absolute .tab的值，并使0px的初始宽度为800px。然后在具有.active类时设置宽度的transition。在这种情况下，您需要应用.tab上的.overflow而不是{{1}} div。

DEMO 此处。

Answer 2

使用slideToggle（）：

而不是添加和删除类

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

并且在css中为.overflow提供首选的宽度和高度。

单击选项卡时CSS宽度动画不起作用

2 个答案: