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 解决方案。

标签： htmlcsscss-animationscss-transitions

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>