javascript - CSS3 动画与点击冲突

Question

所以我有一个动画，如果单击输入，它就会启动，它有点像 Windows 8 动画，当您长按或右键单击时。

我的JS:

$("body").on('click',function(e){
    if($(e.target).closest(".img_list")){
        var inp = $(e.target).closest(".img_list").find("input")[0];
        if(inp.checked){
            $(e.target).closest(".img_list").addClass("clicked tilting");
        }else{
            $(e.target).closest(".img_list").removeClass("clicked tilting");
        }
    }
});

切换类的 CSS:

@keyframes tilter{
    0%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    }
    25%{
-webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, 8deg);        
    }
    50%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    }
    75%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
    }
    100%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    }        
}

但它与我的点击事件冲突，由于某种原因，当我点击时目标不存在。

很难解释所以我写了一个 fiddle for you here 如果您像疯子一样点击，您最终会看到这种情况发生。它还有我的原始代码，比这更容易，也更干净。

有人可以向我解释为什么这是冲突吗？

Answer 1

首先是一些关于您的 CSS 的一般注意事项:

• 仅将 vendor 的前缀放在带前缀的关键帧动画中，这意味着在您的 @-webkit-keyframes 等中仅使用 -webkit-transform
• 您可以通过用逗号分隔值来重用关键帧，因此您可以使用 0%, 50%, 100% { ... do something ... } 而不是三个单独的一个
• 因为您根本看不到背面，所以不需要backface-visibility。同样，visible 是默认值，所以大多数时候你不必声明它
• 避免使用 !important，因为它们以后很难更改。始终选择对它们使用选择器特异性
• 总是把没有前缀的属性放在有前缀的属性之后，所以 -webkit-animation 应该放在 before animation 因为你想让事情像尽可能跨浏览器的标准
• 尽量让你的代码看起来干净，这对以后确实有帮助，也有助于其他与你一起工作或在你之后工作的人

现在针对您的实际问题:

perspectivefunction仅在 Webkit 浏览器中受支持。透视图函数 是转换 中的透视图，如下所示:-webkit-transform: perspective(n)

因此，您应该通过在父级上使用透视属性来应用透视。在这种情况下，这意味着 body 元素，但更具体的父元素通常会更好。

这是一个 cleaned up version你的代码与它一起工作

正如 KingKing 在他的 comment below 中指出的那样，您还可以通过在父对象上应用 perspective(0) rotate3d(0,1,0,0) 来解决此问题。 Demo of that , 但最好使用更标准的 perspective 属性。

---

对于后来的其他人来说，你的问题可能不完全一样。大多数 CSS 渲染问题都是由于缺乏硬件加速引起的，您可以使用 transform: translateZ(1px) (带前缀)或将来使用 will-change属性