javascript - 如何检测悬停过渡的结束

Question

如何检测 :hover 过渡的结束？我已经尝试过到处都可以找到的用于过渡的代码，即：

document.getElementById('title-text').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {

console.log('done');

});

标签： javascripthtmlcss

Answer 1

您应该注意transitionend事件侦听器，因为它仅在转换完成后才起作用，而不是当用户将鼠标拉出元素时。

有人提到要注意mouseout事件，不要那样做。

document.getElementById('title-text').addEventListener('transitionend', function(e) {
  console.log('done');
});

#title-text {
  font-size: 60px;
  font-weight: bold;
  transition: 4s ease-in-out;
}

#title-text:hover {
  font-size: 100px;
}

<div id='title-text'>This is Text</div>

此外，如果您希望它只执行一次，请使用以下jQuery .one()方法执行此操作：

$('#title-text').one('transitionend', function(e) {
  console.log('done');
});

#title-text {
  font-size: 60px;
  font-weight: bold;
  transition: 4s ease-in-out;
}

#title-text:hover {
  font-size: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='title-text'>This is Text</div>