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

【问题标题】：Why doesn't this CSS transition complete it's move hover为什么这个 CSS 过渡没有完成它的移动悬停
【发布时间】：2016-04-29 18:12:59
【问题描述】：

我有一个在悬停时进行转换的按钮。但不知何故，它有时并没有完成它的过渡。它跑到一半然后停止或卡在那里。悬停后如何使其强制完全过渡？

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);
}

&lt;div class="shuffle" style="background-color: transparent;"&gt;&lt;/div&gt;

有解决办法吗？

这里有一个例子：注意过渡是如何卡在中途的。我意识到它只有在它已经悬停并且光标正在移动时才会发生。

【问题讨论】：

在堆栈 sn-p 演示中工作正常。您在这里也看到同样的问题吗？
@charlietfl 感谢您的评论。是的，这里也有问题。但是尝试移动光标，您会看到图标在中间停留了一秒钟，然后它会移回正常位置。
@TheGuy 尝试将持续时间减少到0.1s。您还需要一个过渡持续时间才能使过渡可见吗？如果没问题，请检查没有持续时间的行为。您可以使用 transform : initial; 更新 div.shuffle css 属性，以使 div 恢复其初始状态。
@pratikwebdev 我尝试将webkit-transform-origin: initial; 添加到现有代码中，但没有解决。但是，您的意思是同时拥有 transition 和 transform 属性吗？
@charlietfl 我在 Safary 和 Chrome 上试过。都有问题

标签： jquery css css-transitions css-animations

【解决方案1】：

您看到的是预期的行为，因为当您在元素上使用 rotateX 时，因为随着元素的旋转，它的边界开始缩小（边界并没有完全缩小，而是它在画布上的投影，这就是我们将其视为输出，缩小）。因此，当您继续移动鼠标时，有时鼠标实际上会超出元素的当前边界。我在下面的 sn-p 中为元素添加了一个边框，以便您查看发生了什么。

当鼠标静止时您看不到问题，因为 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);
}

&lt;div class="shuffle" style="background-color: transparent;"&gt;&lt;/div&gt;

解决方案实际上是将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);
}

&lt;div class="shuffle" style="background-color: transparent;"&gt;&lt;/div&gt;

【讨论】：