Transitionend не запускается в конце перехода, но когда мышь перестает двигаться в браузерах с поддержкой Blink
Я опустил код ниже, но в основном на странице есть элемент. При наведении : применяется шкала (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>
1 ответ
Очевидно ошибка в Chrome, моя проблема была объединена в: