jquery - 为什么这个 CSS 过渡没有完成它的移动悬停

Question

我有这个按钮可以在悬停时进行转换。但不知何故，它有时无法完成过渡。它走到一半然后停下来或卡在那里。我怎样才能让它在悬停时强制完全过渡？

div.shuffle {
  background-image: url(https://goo.gl/PydgT2);
  background-color: transparent;
  width: 32px;
  height: 32px;
  transition: all 0.3s linear;
}
div.shuffle:hover {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

<div class="shuffle" style="background-color: transparent;"></div>

有解决办法吗？

---

这是一个例子:注意转换是如何卡在一半的。我意识到它只有在它已经悬停并且光标正在移动时才会发生。

Answer 1

您看到的是预期的行为，因为当您在元素上使用 rotateX 时，因为随着元素的旋转，它的边界开始缩小(边界并没有完全缩小，但它在元素上的投影canvas，也就是我们看到的输出，缩小了)。因此，当您继续移动鼠标时，有时鼠标实际上会超出元素的当前边界。我在下面的代码片段中为元素添加了边框，以便您查看发生了什么。

当鼠标静止时您看不到问题，因为 UA 仅在鼠标移动时触发悬停进/出事件。它不会在元素边界发生变化时触发事件，因为那样会产生大量开销。

div.shuffle {
  background-image: url(https://goo.gl/PydgT2);
  background-color: transparent;
  width: 32px;
  height: 32px;
  border: 1px solid;
  transition: all 0.3s linear;
}

div.shuffle:hover {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

<div class="shuffle" style="background-color: transparent;"></div>

---

解决方案实际上是将 hover 选择器放在不旋转的元素上。您可以使用单独的包装元素或将 background-image 移动到伪元素。

注意:即使在这里，如果您将鼠标快速移入和移出 div，也会发生相同的效果，因为一旦悬停，选择器就不再适用，因此该元素将转换回其正常状态。

div.shuffle {
  position: relative;
  background-color: transparent;
  width: 32px;
  height: 32px;
  border: 1px solid;
  transition: all 0.3s linear;
}
div.shuffle:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background-image: url(https://goo.gl/PydgT2);
  transition: all 0.3s linear;
}
div.shuffle:hover:after {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

<div class="shuffle" style="background-color: transparent;"></div>