强制结束CSS过渡动画的悬停效果

Question

By default, if you stop hovering over an element, the transitioning of any properties will stop as well. Simple example:

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

- mykhailohoy

---

我认为单纯使用css无法实现这个，因此我添加了一个结合javascript的示例。 - prettyInPink

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>

- prettyInPink

Answer 2

如前所述，这是无法通过纯CSS实现的。

不过，这里有一个需要嵌套并且不能用于多个同级元素以及当鼠标移出文档时失效的hack方法。

body {
  overflow: hidden;
}

[ctr] {
  display: inline-block;
}

[box] {
  width: 80px;
  height: 80px;
  background: red;
  position: relative;
  transition: 1s;
  left: 0;
}

[ctr]:hover {
  left: 20px;
  width: 9999px;
  height: 9999px;
  animation: resetctr 1s 1s linear forwards;
}

[ctr]:hover>[box] {
  left: 20px;
  animation: resetbox 1s 1s forwards;
}

@keyframes resetbox {
  from {
    left: 20px;
  }
  to {
    left: 0;
  }
}

@keyframes resetctr {
  to {
    width: auto;
    height: auto;
  }
}

<div ctr>
  <div box></div>
</div>

- Rainbow

Answer 3

一个简单的CSS解决方案是考虑使用伪元素，在过渡期间覆盖整个屏幕，以允许其结束。

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

li:hover {
  left: 20px;
}

li:before {
  content:"";
  position:fixed;
  inset:0 0 100%;
  z-index:999;
}
li:hover:before {
  animation:h 1s;
}

@keyframes h{
  0%,98% {inset:0;}
}

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

- Temani Afif

---

可能不是 OP 的情况，但如果动画使用变换来移动元素，则需要将此 hack 移动到容器中：https://jsfiddle.net/gzsh2L46/ 但是这种解决方案的一个大问题是，当用户停止悬停页面时，它仍然会停止。 - Kaiido