Question

我已经删除了下面的代码，但基本上是页面上的元素。在悬停转换：缩放（1.2）时应用。元素有一个过渡。主要意图是在转换时需要执行一些逻辑，因此附加了 transitionend 事件处理程序。现在所有非Blink供电的浏览器都可以正常工作。但是在Chrome和Opera中，如果你继续移动鼠标，关闭元素，直到你停止移动鼠标才会触发事件，尽管过去完成了转换。之前有人遇到过这个并有解决方案吗？

<!DOCTYPE html>
<html class=''>
<head>
    <meta charset='UTF-8'><meta name="robots" content="noindex">
    <link rel="canonical" href="http://codepen.io/SayTen/pen/zvNbOM" />
    <style class="cp-pen-styles">
        #transitioner {
            margin: 50px;
            width: 100px;
            height: 100px;
            transition: transform 0.2s;
            display: block;
            background-color: black;
        }

        #transitioner:hover {
            transform: scale(1.2);
        }

        body {
            color: black;
            font-family: sans-serif;
        }
    </style>
    </head>
    <body>
        <div>This demos an issue in Chrome where transform transitions do not end reliably.  Mouse over the element and keep the mouse still and it fires immediately, keep moving the mouse and it won't fire until you stop.</div>

        <div id="transitioner"></div>

        <div id="logger"></div>

        <script>
        window.addEventListener('load', function () {
            var logger = document.getElementById('logger');
            document.getElementById('transitioner').addEventListener('transitionend', function (e) {
                var date = new Date();
                logger.appendChild(document.createTextNode(date.getTime() + ': Event Fired'));
                logger.appendChild(document.createElement('br'));
            });
        });
        </script>
    </body>
</html>

Answer 1

显然是Chrome中的一个错误，我的问题已合并到：

https://code.google.com/p/chromium/issues/detail?id=513833

Transitionend不会在转换结束时触发，但是当鼠标停止在Blink供电的浏览器上移动时

1 个答案: