选项卡加载时的 CSS 过渡 - 错误

Question

我正在创建一个主屏幕，我有 3 个选项卡，您可以在主屏幕上切换。当您单击一个选项卡中的所有 li 时，它们都会过渡到页面，但如果您在选项卡之间快速单击，则它们并不总是加载。这似乎只影响PC和Mac上的Chrome，有时影响Mac上的safari。在PC和Mac上的火狐上很好。

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