CSS3旋转过渡导致鼠标点击检测间歇性失效

Question

CSS3旋转过渡导致鼠标点击检测间歇性失效

htmlcssonclickcss-transitionscss-transforms

8

这个问题与CSS3 Rotate on animated element causing click event not to invoke非常相似。

虽然我的问题略有不同，而且无法添加支持信息进行评论。

我在链接内部有一个旋转的span元素，它会在鼠标悬停时绕Y轴旋转。点击事件（用于jQuery或仅用于链接导航）并不总是被检测到。尝试点击链接的填充区域（仅限文本之外但在链接上）。这几乎就像是存在命中检测问题，因为span元素正在旋转，从而出现了鼠标没有点击到span元素的角度。即使鼠标仍然点击链接的填充区域。70-110度左右的角度似乎是问题所在。

前面提到的解决方案实际上并不能解决这个问题。此外，我的问题可能略有不同，因为我的旋转是通过CSS过渡处理而不是JS间隔触发。

有什么想法吗？有人以前见过这个吗？我知道这是一种俗气的链接方式，但对于目标网站来说，它是可以接受的。

请随意简化jsfiddle，我从简单开始，并添加了一些调试信息以帮助识别问题。

HTML：

<ul>
  <li><a href="" class="flip-link"><span>Click this link</span></a></li>
  <li id="LinkCounter">LinkClicked</li>
  <li>&nbsp</li>
  <li id="SpanCounter">SpanClicked</li>
<ul>

css：

ul li
{
    display: inline;
    float: left ;
}

.flip-link
{
    float:left ;
}

span
{
    float:left ;
}


.flip-link {
    display: block;
    overflow: hidden;

    height: 20px;
    padding: 5px 50px 7px 50px ;
    margin-right: 10px ;

    background: #AAA;

    -webkit-perspective: 50px;
       -moz-perspective: 50px;
        -ms-perspective: 50px;
            perspective: 50px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}

.flip-link span {
    display: block;
    position: relative;

    background: #EEE;

    padding: 0px 10px ;

    -webkit-transition: all 1000ms ease;
       -moz-transition: all 1000ms ease;
        -ms-transition: all 1000ms ease;
            transition: all 1000ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;

}
    .flip-link:hover span
    {
        -webkit-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
           -moz-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
            -ms-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
                transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );

        color: #55FF55 ;
    }

JS：

var linkClickCount = 0 ;
var spanClickCount = 0 ;

$(document).ready(function () {
    $('.flip-link').click(function () {
            linkClickCount++ ;            
            $("#LinkCounter").text(linkClickCount);

            return (false);
    });

    $('.flip-link span').click(function () {
            spanClickCount++ ;            
            $("#SpanCounter").text(spanClickCount);
    });
});

- Ryan Woodham

1

我忘了提到，如果跨度不转换，鼠标点击可以正常工作。如果我设置静态角度，您可以在链接的填充区域（而不是文本上）单击，它仍然会检测到单击。但是，如果文本正在旋转，在大约70-110度左右，它一致地无法捕获单击。 - Ryan Woodham

当物品在旋转时，您需要注册点击吗？这很关键吗？ - fizzy drink

是的，因为这是一个链接，我需要用户能够在旋转完成之前点击链接。如果他们在旋转期间点击并且点击无效，自然的假设是该链接不可点击。但是好问题，请查看此处未公开宣传的实时项目：www.trickspoke.com对于此现场网站，过渡非常快，最小化了问题 - 即使问题仍然存在。 - Ryan Woodham

我应该补充说明，你可以看出这不是一个基本的命中测试问题，因为当鼠标点击时，你可以看到它在旋转跨度的一部分上方。只是某种方式没有检测到那个点击。即使你将其用作标准的<a href="something>标签，如果在给定的角度范围内单击旋转跨度，浏览器也不会导航。 :( - Ryan Woodham

2个回答

1

一个元素被旋转，使其背面显示时，除非你明确强制背面可见，否则不会在背面接收点击。

在你的上使用它：

-webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
    -ms-backface-visibility: visible;
     -o-backface-visibility: visible;

请查看：http://jsfiddle.net/5bsG3/8/

- kontur

据我所知，backface-visibility 默认为 visible。因此这不应该改变任何东西。 - AlicanC

我不小心将我的背面可见性设置为隐藏，所以这帮助我找到了问题。谢谢！ - Spidy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dnaso · Accepted Answer

问题。由于使用CSS时浏览器之间存在差异甚至存在差异，因此您将在使用纯CSS解决方案时遇到问题。您还必须意识到，在动画中间时，CSS实际上会折叠您的divs。我们看到的实际上不是正在发生的事情，而是将div大小折叠为0，这意味着当您单击时，您将无法“真正点击它”。下面显示您应该放置一个绝对定位的div作为覆盖，并从明确的、不可见的div中处理点击事件，这仍然具有您实际单击链接的幻觉。

<a id="link"></a>

 $("#link").click(function(){

spanClickCount++;
$("#SpanCounter").text(spanClickCount);

}