jquery - CSS 过渡导致滞后

Question

框类内部的过渡会导致 jQuery 延迟，但是如果页面刷新几次，则不会出现延迟。如果删除过渡，则根本不会出现延迟，有什么方法可以使 CSS 过渡没有初始延迟？

JSFIDDLE

CSS:

html {
    background:url("http://www.phactr.com/css/img/background.jpg");
}
.box {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
    /* Chrome,Safari4+ */
    width: 230px;
    height: 230px;
    border-radius: 100%;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
    transition: .33s ease; 
}
.box:hover {
    width: 250px;
    height: 250px;
}
.over {
    -webkit-filter: blur(3px) opacity(0.3);
}

JQUERY:

$(document).ready(function () {
    $("#one").click(function () {
        setTimeout(function () {
            $("#one, #two, #three").addClass("over", "blind");
        }, 10);
    });    
});

Answer 1

您可以执行此操作以防止单击时发生过渡，但请注意，当再次悬停在 over 类上时，这将禁用过渡。

.over {
    transition: none;
    -webkit-filter: blur(3px) opacity(0.3);
}

要保持过渡，您可以这样做

$(document).ready(function () {
    $("#one").click(function () {
        setTimeout(function () {
            $("#one, #two, #three").addClass("over", "blind").show().delay(100).css('transition', '0.33s ease');
        }, 10);
    });
});

http://jsfiddle.net/Ukx4u/165/

.show() 用于“动画化”延迟和更新过渡。我不确定你为什么有超时功能，如果它没有做我不知道的事情，它可以被删除。我留下它是因为你在原始代码中有它