有没有办法让translate3d悬停时总是发生流畅的动画？

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

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

见：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 也适用于我。您的里程可能会有所不同。

Answer 2

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

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

当您在“新”加载（重新加载页面）时遇到问题时，跳转不会发生。或者非常非常非常偶尔，如果您一直快速移动鼠标（这不是正常的用户行为）。

所以我想在开发过程中，当你对 CSS 应用更改时可能会出现这个问题，否则这不应该发生。

我希望这会有所帮助:)