为什么这个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时，因为当元素被旋转时，它的边界开始缩小（边界不是完全缩小，而是它在画布上的投影，是我们所看到的输出，收缩）。因此，当您继续移动鼠标时，有时鼠标实际上将位于元素的当前边界之外。我在下面的代码片段中为元素添加了一个边框，供您查看正在发生的事情。

当鼠标静止时，您没有看到问题，因为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>