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 的一些注意事项：

• 仅将供应商的前缀放在前缀关键帧动画中，即仅将-webkit-transform 放在@-webkit-keyframes 等中。
• 您可以通过用逗号分隔值来重复使用关键帧，因此您可以使用 0%, 50%, 100% { ... do something ... } 而不是三个单独的值
• 由于您根本没有查看背面，因此不需要backface-visibility。同样，visible 是默认值，因此您大部分时间都不必声明它
• 避免使用!importants，因为它们以后很难更改。始终选择对它们使用选择器特异性
• 始终将不带前缀的属性放在带前缀的属性之后，所以-webkit-animation 应该在之前 animation 因为您希望在浏览器中尽可能保持标准
• 尽量让您的代码看起来整洁，这确实对以后有帮助，也有助于其他与您一起工作或在您之后工作的人

现在解决你的实际问题：

perspectivefunction 仅在 Webkit 浏览器中受支持。透视函数是transform内部的一个，像这样：-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 属性强制执行此操作