Я добавил код ниже, но в основном на странице есть элемент. При наведении применяется преобразование: масштаб (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>
