單擊標簽時CSS寬度動畫不起作用

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 不會有一個div WORK display: none; 屬性。
如果該div有一個帶display: none;的父級，則將不起作用display: none; 屬性。

相反，您可以嘗試為.tab賦予absolute position ，並使初始寬度為0px 。 然后，在具有.active類的情況下將其寬度設置為800px 。 在這種情況下，您需要在.tab而不是.overflow div上應用transition 。

演示在這里。

Answer 2

而不是添加和刪除類，請嘗試使用slideToggle（）：

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

並且在css中為.overflow提供首選的寬度和高度。