CSS3动画与单击冲突

CSS3 Animation conflicting with click

本文关键字：冲突 单击 动画 CSS3      更新时间：2023-09-26

所以我有一个动画，如果点击输入，它就会启动，当你长按或右键点击时，它有点像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);
    }        
}

但这与我的点击事件相冲突，因为某种原因，当我点击时目标不在那里。

这很难解释，所以我在这里为你写了一首小提琴如果你像疯子一样点击，你最终会看到这种情况发生。它还有我的原始代码，比这更容易，也更干净。

有人能向我解释一下为什么这是一场冲突吗？

关于CSS的一些一般注意事项：

  • 只将供应商的前缀放在带前缀的关键帧动画中，这意味着@-webkit-keyframes等中只有-webkit-transform
  • 可以通过逗号分隔值来重用关键帧，因此可以使用0%, 50%, 100% { ... do something ... }而不是三个单独的值
  • 由于您根本没有查看背面，因此不需要backface-visibility。同样，visible是默认值，因此您不必在大多数情况下声明它
  • 避免!important，因为它们以后很难更改。总是选择使用选择器专用性而不是它们
  • 总是将不固定的属性放在带前缀的属性之后，因此-webkit-animation应该在animation之前，因为您希望在浏览器之间尽可能标准化
  • 试着让你的代码看起来整洁，这确实有助于以后的工作，也有助于其他人与你一起工作或在你之后工作

现在针对您的实际问题：

perspective函数仅在Webkit浏览器中受支持。透视函数是transform内部的函数，类似于：-webkit-transform: perspective(n)

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

这是你的代码的一个清理版本，它可以工作

正如KingKing在下面的评论中指出的那样，您也可以通过在父级上应用perspective(0) rotate3d(0,1,0,0)来解决这个问题。这是一个演示，但更可取的是使用更标准的perspective属性。

对于稍后观察的其他人来说，你的问题可能并不完全相同。大多数CSS渲染问题都是由硬件加速不足引起的，您可以使用transform: translateZ(1px)(带前缀(强制加速，也可以在将来使用will-change属性

相关文章：