鼠标离开时反转锚点的悬停效果

Question

在鼠标离开时，是否可以反转此动画方向？

我尝试为 .link 添加 mouseleave 事件，但它会停止悬停效果。

.link { 
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 100px;
}
.box {
  width: 100%;
  height: 100%;
  content: '';
  background: black;
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.5s ease-in;
}
.link:hover .box {
  transform: translateX(0)
}

<a class="link">
  item
  <span class="box"></span>
</a>

- Konya

---

当你离开时，你所说的“反转动画”是什么意思？当你离开时，动画已经自动反转了。 - Kasey Chang

@KaseyChang 将方向从右到左改为从左到右。 - Konya

这是您要找的内容吗：https://dev59.com/F2_Xa4cB1Zd3GeqPyCyS#15194324 - ArielGro

当鼠标悬停时，您希望它从右侧“滑入”，但当您离开悬停时，您希望它从左侧“滑出”？ - Kasey Chang

Answer 1

使用 scale 结合 transform-origin 可以实现以下效果：

.link {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 100px;
}

.link::after {
  content: '';
  height: 100%;
  background: black;
  position: absolute;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-in, transform-origin 0s 0.4s;
}

.link:hover::after {
  transform: scaleX(1);
  transform-origin: right;
}

<a class="link">
  item
</a>

相关问题：如何使用背景获得不同的想法？如何将下划线从左到右动画化？

- Temani Afif

Answer 2

.link { 
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 100px;
}
.box {
  width: 100%;
  height: 100%;
  content: '';
  background: black;
  position: absolute;
  left: 0;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
}
.link:hover .box {
  transform: translateX(0)
}

<a class="link">
  item
  <span class="box"></span>
</a>

- Rush W.

---

这不是OP想要的。OP的意思是从左到右转换进入，然后向同一方向转换出去。想象一辆汽车从左到右行驶，停下来，然后继续同样的方向。 - ArielGro