CSS 过渡导致延迟答案

【问题标题】：CSS transition causes lagCSS 过渡导致延迟
【发布时间】：2014-06-19 14:23:41
【问题描述】：

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

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);
}

查询：

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

【问题讨论】：

请在您的问题中提供一些代码示例，而不仅仅是在 jsfiddle 中。
滞后是什么意思？我在 chrome 上试了一下，没有看到任何异常行为。你在.box 上有过渡，它在 0.33 秒内过渡不透明度，这是你指的滞后吗？
单击圆圈时，应用的模糊效果不平滑。如果从盒子类中移除过渡，它将顺利应用。
FF 25.0 存在严重的视觉问题，但您似乎没有尝试支持？

标签： jquery css transition gradient lag

【解决方案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() 用于“动画化”然后延迟和更新过渡。我不确定你为什么有超时功能，如果它没有做我不知道的事情，它可以被删除。我把它留在了，因为你在原始代码中有它

【讨论】：

谢谢，但这并不是我想要的，我希望保持过渡。
@Danny 我更新了，有点乱。使用延迟来延迟转换时的重置。这会在添加类后保持过渡
非常感谢您解决了我所看到的滞后问题。