悬停时强制结束 CSS 过渡答案

【问题标题】：Force end CSS transition on hover悬停时强制结束 CSS 过渡
【发布时间】：2021-08-18 22:59:47
【问题描述】：

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

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

【问题讨论】：

我认为纯粹使用css 是不可能实现这一点的，我添加了一个使用javascript 组合的示例

标签： html css css-animations css-transitions

【解决方案1】：

一个简单的 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>

【讨论】：

对于 OP 来说可能不是问题，但如果动画使用转换来移动元素，则需要将此 hack 移动到容器中：jsfiddle.net/gzsh2L46 但此解决方案存在一个大问题是当用户停止悬停页面时它仍然会停止。

【解决方案2】：

如前所述，纯 CSS 无法做到这一点

但是，如果鼠标移出文档，则需要嵌套并且不适用于多个兄弟姐妹。

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>

【讨论】：

【解决方案3】：

不确定这是否可以仅使用 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>

【讨论】：