鼠标离开时在锚标签上反向悬停答案

【问题标题】：reverse hover on anchor tag on mouse leave鼠标离开时在锚标签上反向悬停
【发布时间】：2020-09-02 23:46:00
【问题描述】：

是否可以在 mouseleave 上反转此动画方向？

我尝试在 .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>

【问题讨论】：

离开时“反转动画”到底是什么意思？当你离开时，动画已经反转了。
@KaseyChang 反转方向从左到右而不是从右到左
这是你要找的东西吗：stackoverflow.com/a/15194324/2279082
所以当悬停开始时，您希望它从右侧“滑入”，但是当您离开悬停时，您希望它从左侧“滑出”？

标签： javascript html css

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

使用背景获得不同想法的相关问题：How to animate underline from left to right?

【讨论】：

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

【讨论】：

这不是 OP 想要的。OP 的意思是从左到右过渡并向外过渡到同一个方向。想象一辆车从左到右驶来，停下然后以同样的方式继续行驶