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

Question

以下是我正在处理的内容的精简版。基本上，我有一系列选项卡，单击这些选项卡时会显示不同的图片。当我单击选项卡时，我想设置溢出宽度的动画，显示 .show 内容。我不明白为什么事情没有动画。仅供引用，我在 Chrome 中执行此操作。

LIVE CODE

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; 属性，它也不会工作。

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

DEMO 在这里。