Transitionend不是在过渡结束时触发，而是在鼠标停止移动时触发

我已经在下面的代码，但基本上有一个元素在页面上。在悬停时，应用transform: scale(1.2)。元素上有一个过渡。主要目的是在transitionend上需要执行一些逻辑，因此附加了一个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>

显然是Chrome中的一个bug，我的问题被合并到:

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

相关内容

最新更新

热门标签：