javascript - 在选项卡式内容的不透明度属性上使用 CSS3 过渡不起作用

Question

我正在使用 HTML5、CSS3 和 jQuery 开发一个简单的选项卡式内容框。

它工作正常除了我无法使用 CSS transitions 和 opacity 逐渐淡化内容。这是代码:

$("#filters_switch").on("click", "li", function() {
    $('#filters_switch li').removeClass('tab_selected');
    $(this).addClass('tab_selected');
    $('#filters_content > div').removeClass('tab_selected');
    $('#' + $(this).find('a').data('href')).addClass('tab_selected');
});

#filters_switch {
  padding: 0 4px;
  margin-top: 10px;
  border-bottom: 1px solid #d0d0d0;
  text-align: center;
}
#filters_switch li {
  display: block;
  float: left;
  min-width: 200px;
  padding: 0 1px;
  margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
  color: #000;
  background: #fff;
  border-bottom: 1px solid #fff;
}
#filters_switch a {
  display: block;
  text-decoration: none;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: bold;
  background: #f2f2f2;
  color: #962b27;
  border: 1px solid #d0d0d0;
  border-radius: 8px 8px 0 0;
}
#filters_content .tab {
  padding: 0 10px;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
#filters_content .tab.tab_selected {
  display: block;
  opacity: 1;
}

#filters_content .tab h2 {
  font-size: 18px;
  font-weight: bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
  <li id="filters_standard_link" class="tabnav_li tab_selected">
    <a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
  </li>
  <li id="filters_advanced_link" class="tabnav_li">
    <a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
  </li>
</ul>

<div id="filters_content" class="tabs">
    <div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
    
    <div id="filters_advanced" data-id="filters_advanced" class="tab">
      <h2>Esse odit sapiente odio deleniti</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
</div>

由于不能在 display 属性上使用转换，所以我在 opacity 上使用了它，希望首先显示内容，但是 0 不透明度，然后慢慢将不透明度设为 1。

然而，这并没有发生。为什么？我该如何解决这个问题？

Answer 1

正如您所说，您不能将 CSS 转换应用于 display，因此请尝试使用 .fadeIn() 和 .fadeOut() 同时绝对定位选项卡。

高

$("#filters_switch").on("click", "li", function() {
   if(!$(this).hasClass('tab_selected')){
   $(this).addClass('tab_selected').siblings('li').removeClass('tab_selected');
    
    $('#' + $(this).find('a').data('href')).fadeIn('slow').siblings('div.tab').fadeOut('slow');
    }
});

#filters_switch {
  padding: 0 4px;
  margin-top: 10px;
  border-bottom: 1px solid #d0d0d0;
  text-align: center;
}
#filters_switch li {
  display: block;
  float: left;
  min-width: 200px;
  padding: 0 1px;
  margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
  color: #000;
  background: #fff;
  border-bottom: 1px solid #fff;
}
#filters_switch a {
  display: block;
  text-decoration: none;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: bold;
  background: #f2f2f2;
  color: #962b27;
  border: 1px solid #d0d0d0;
  border-radius: 8px 8px 0 0;
}
#filters_content .tab {
  padding: 0 10px;
  display: none;
 
  position: absolute;
}
#filters_content .tab.tab_selected {
  display: block;
  //opacity: 1;
}

#filters_content .tab h2 {
  font-size: 18px;
  font-weight" bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
  <li id="filters_standard_link" class="tabnav_li tab_selected">
    <a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
  </li>
  <li id="filters_advanced_link" class="tabnav_li">
    <a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
  </li>
</ul>

<div id="filters_content" class="tabs">
    <div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
    
    <div id="filters_advanced" data-id="filters_advanced" class="tab">
      <h2>Esse odit sapiente odio deleniti</h2>
      <p>Lorem ipsum dol odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
</div>