悬停时强制结束CSS过渡

沃梦达教程前端问题

2022-01-01

Force end CSS transition on hover(悬停时强制结束CSS过渡)

本文介绍了悬停时强制结束CSS过渡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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中是不可能的

但是，如果鼠标移出文档，这里有一个需要嵌套且不适用于多个同级的黑客攻击。

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;
  }
}