为什么这个 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 仅在鼠标移动时触发 hover-in/out 事件。它不会在元素的边界发生变化时触发事件，因为那样会产生大量开销。

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 移动到 pseudo-element.

注意： 即使在这里，如果您将鼠标快速移入和移出 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>

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

Why doesn't this CSS transition complete it's move hover

css

jquery

css-transitions

css-animations