Question

我有一个带有右侧菜单的CSS布局（绿色）。
默认情况下，菜单的主要部分隐藏在视口外。
鼠标悬停在右侧菜单上：短暂延迟后，菜单会完全转换为视口（稍微延迟后）。
右侧菜单上的鼠标输出：菜单应转换回其初始位置（无延迟）。

请参阅此JsFiddle上的绿色菜单：尝试悬停绿色菜单

以下是相关的CSS代码：

section#base-layer section#base-layer-contact-bar {
    position: absolute;
    box-sizing: border-box;
    top: 60px;
    right: -90px;
    width: 150px;
    height: calc(100% -  60px);
    transform: translate3d(0, 0, 0);
    transition: transform 0.6s ease-in;
    background-color: green;
}
section#base-layer section#base-layer-contact-bar:hover {
    transform: translate3d(-90px, 0, 0);
    transition-delay: 1s;
}

要重现：在动画处于初始状态时将鼠标移出绿色部分，即在它到达完全扩展名之前。

有没有办法让动画一直流畅？
我的CSS有问题吗？
这可能吗？
如果有，那么只有CSS解决方案，或者我必须采取不同的路径？

注意我在ubuntu上使用Chrome v45。

Answer 1

起初我无法重现你的问题。

唯一可靠的方法是当我对小提琴进行更改并点击run时，跳跃开始发生。

当你来到一个＆＃34;新鲜＆＃34;加载（重新加载页面），跳转没有发生。或者非常偶尔，如果你一直快速移动鼠标（不正常的用户行为）。

所以我猜想在将更改应用到CSS时可能会出现此问题，但否则不会发生这种情况。

我希望这会有所帮助：）

Answer 2

以下适用于我。我只是删除了transform: translate3d(0, 0, 0)上的#base-layer-contact-bar。

请参阅：https://jsfiddle.net/wuacxfn1/1/

section#base-layer section#base-layer-contact-bar {
  position: absolute;
  box-sizing: border-box;
  top: 60px;
  right: -90px;
  width: 150px;
  height: calc(100% -  60px);
  /* transform: translate3d(0, 0, 0); < remove this */
  transition: transform 0.6s ease-in;
  background-color: green;
}

问题是我真的不知道为什么它有效！也许比我聪明的人可以给我们答案？

FWIW，this version使用translateX也适用于我。您的里程可能会有所不同。

有没有办法在使用translate3d进行悬停时始终发生平滑动画？

2 个答案: