悬停时强制结束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>

Answer 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>

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>