製表符加載的CSS轉換 - bug

Question

我正在創建一個主屏幕，我有3個選項卡，您可以在主屏幕之間進行切換。當您單擊標籤頁中的所有內容時，即可快速點擊標籤頁之間的內容，然後它們不會始終加載。這似乎只會對PC和Mac上的Chrome以及Mac上的Safari瀏覽器產生影響。罰款在PC和Mac上的Firefox。

http://codepen.io/2ne/pen/1f7dbb81f464fb5b0e1a4f5bacc30a56

標籤JS

$(document).ready(function() { 
    $('nav li').click(function(){ 
    $('nav li').removeClass('active'); 
    $(this).addClass('active'); 
    $('.tab').removeClass('active'); 
    $('#' + $(this).attr('data-tab')).addClass('active'); 
    }); 
}); 

CSS

.tab-content .tab li { 
    opacity: 0; 
    transform: translatey(-50px) scale(0); 
} 
.tab-content .tab.active li { 
    transition: all 500ms ease; 
    transform-origin: top center; 
    transform: translatey(0) scale(1); 
    opacity: 1; 
} 
@for $i from 1 through 50 { 
    .tab-content .tab.active li:nth-child(#{$i}) { 
    transition-delay: (#{$i * 0.1}s); 
    } 
} 

Answer 1

的一部分，您需要爲轉換和過渡性增加供應商的特定值。下面是修改後的CSS：

$headerColour: #456878; $headerHeight: 58px; $headerLineHeight: $headerHeight - 2px; @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); .cf:after { 
      clear: both; 
      content: " "; 
      display: table; 
     } 

     body { 
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/12596/bg.png"); 
      background-attachment: fixed; 
      -ms-background-size: contain; 
      background-size: contain; 
      color: #fff; 
      font-family: "Lato"; 
      font-size: 18px; 
      font-weight: 300; 
      overflow-y: scroll; 
     } 

     header { 
      background: $headerColour; 
      height: $headerHeight; 
      position: relative; 
     } 

      header li { 
       position: absolute; 
       top: 0; 
       line-height: $headerLineHeight; 
      } 

       header li.logo { 
        left: 20px; 
       } 

       header li.user { 
        right: 20px; 
       } 

     .wrapper { 
      position: absolute; 
      top: 120px; 
      left: 0; 
      right: 0; 
      margin: auto; 
      width: 80%; 
     } 

     nav { 
      margin-bottom: 50px; 
      margin-left: 20px; 
     } 

      nav li { 
       color: rgba(255, 255, 255, 0.75); 
       cursor: pointer; 
       float: left; 
       font-size: 20px; 
       margin-right: 60px; 
       -webkit-transition: color 500ms ease 0s; 
       -moz-transition: color 500ms ease 0s; 
       -ms-transition: color 500ms ease 0s; 
       -o-transition: color 500ms ease 0s; 
       transition: color 500ms ease 0s; 
       width: 100px; 
      } 

       nav li:not(.active):hover, 
       nav li.active { 
        color: rgba(255, 255, 255, 1); 
       } 

       nav li.active { 
        font-size: 22px; 
        font-weight: 400; 
       } 

     .tab-content .tab { 
      position: absolute; 
      margin-bottom: 100px; 
      visibility: hidden; 
     } 

      .tab-content .tab.active { 
       visibility: visible; 
      } 

      .tab-content .tab > ul { 
       margin-bottom: 100px; 
      } 

      .tab-content .tab li { 
       background: #fff; 
       height: 200px; 
       width: 200px; 
       float: left; 
       background: #fff; 
       margin: 20px; 
       -ms-border-radius: 30px; 
       border-radius: 30px; 
       -ms-opacity: 0; 
       opacity: 0; 
       -webkit-transform: translatey(-50px) scale(0); 
       -moz-transform: translatey(-50px) scale(0); 
       -ms-transform: translatey(-50px) scale(0); 
       -o-transform: translatey(-50px) scale(0); 
       transform: translatey(-50px) scale(0); 
      } 

      .tab-content .tab.active li { 
       -webkit-transition: all 500ms ease; 
       -moz-transition: all 500ms ease; 
       -ms-transition: all 500ms ease; 
       -o-transition: all 500ms ease; 
       transition: all 500ms ease; 
       -webkit-transform-origin: top center; 
       -moz-transform-origin: top center; 
       -ms-transform-origin: top center; 
       -o-transform-origin: top center; 
       transform-origin: top center; 
       -webkit-transform: translatey(0) scale(1); 
       -moz-transform: translatey(0) scale(1); 
       -ms-transform: translatey(0) scale(1); 
       -o-transform: translatey(0) scale(1); 
       transform: translatey(0) scale(1); 
       -ms-opacity: 1; 
       opacity: 1; 
      } 

     @for $i from 1 through 50 { 
      .tab-content .tab.active li:nth-child(#{$i}) { 
       transition-delay: (#{$i * 0.1}s); 
      } 
     } 

典筆：http://codepen.io/anon/pen/gIDsv