html - 悬停时强制结束 CSS 过渡

Question

默认情况下，如果您停止将鼠标悬停在元素上，则任何属性的转换也将停止。简单的例子:

li {
  position: relative;
  transition: 1s;
  left: 0;
}

li:hover {
  left: 20px;
}

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

尝试从列表的顶部到底部快速运行指针，元素几乎不会移动。我想实现过渡时的行为，一旦开始，就会结束。我正在寻找纯 CSS 解决方案。

Answer 1

不确定这可以通过 css 实现只是，我会使用 Javascript为此，并在转换完成时收听。

let listItems = document.querySelectorAll('li');

listItems.forEach(listItem=>{
  listItem.addEventListener('mouseover', function() {
    this.classList.add('slide-left');
  });
  
  listItem.addEventListener('transitionend', function() {
    this.classList.remove('slide-left');
  });
})

li {
  position: relative;
  transition: 1s;
  left: 0;
}

li:hover, .slide-left {
  left: 20px;
}

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>