为什么这个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>