代码之家  ›  专栏  ›  技术社区  ›  Razvan Zamfir

对选项卡式内容的“不透明度”属性使用CSS3转换无效

  •  0
  • Razvan Zamfir  · 技术社区  · 7 年前

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

    很好用 除了 我无法使用CSS逐渐淡入内容 过渡 不透明度 .代码如下:

    $("#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。

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

    4 回复  |  直到 7 年前
        1
  •  1
  •   Scaramouche    7 年前

    正如您所说,您不能将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>
        2
  •  1
  •   Zuber    7 年前

    您需要修改 jQuery css .使用 fadeIn fadeOut ,你可以实现你想要的

    $("#filters_switch").on("click", "li", function() {
        var toggleSection = $(this).attr('data-toggle');
        $('.tabnav li').removeClass('tab_selected');
        $(this).addClass('tab_selected');
        $('#filters_content > div').fadeOut(250); 
        $("[data-tab="+toggleSection+"]").delay(300).fadeIn(250);
    });
    #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;
    }
    #filters_content > div {
      display: none;
    }
    <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" data-toggle="section-one">
        <a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
      </li>
      <li id="filters_advanced_link" class="tabnav_li" data-toggle="section-two">
        <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" data-tab="section-one" 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" data-tab="section-two">
          <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>

    工作小提琴 here

        3
  •  0
  •   Renzo Calla    7 年前

    转换不会应用于某些属性,包括“显示”属性,因此您可以使用、z索引和“绝对位置”来解决此问题,如示例所示。。

    $("#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 {
      position:relative;
    }
    #filters_content .tab {
      padding: 0 10px;
      z-index: 0;
      opacity: 0;
      -webkit-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      transition: opacity 0.5s;
      
      position: absolute;
        top: 0;
    }
    #filters_content .tab.tab_selected {
      z-index: 1;
      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>
        4
  •  0
  •   Gerard    7 年前

    已删除 display:none 从…起 .tab 并将其定位为绝对值。

    $("#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 {
      position: relative;
    }
    
    #filters_content .tab {
      padding: 0 10px;
      opacity: 0;
      -webkit-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      transition: opacity 0.5s;
      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 dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
      </div>
    </div>