css - 有没有办法让 translate3d 在悬停时始终出现流畅的动画？

Question

• 我有一个带有右侧菜单(绿色)的 CSS 布局。
• 菜单的主要部分默认隐藏在视口(viewport)之外。
• 将鼠标悬停在右侧菜单上:短暂延迟后，菜单会完全转换到视口(viewport)中(稍有延迟后)。
• 鼠标移出右侧菜单时:菜单应平移回其初始位置(无延迟)。

查看此 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

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

唯一可靠的方法是当我对你的 fiddle 应用更改并点击 run 时，跳跃开始发生。

当您在"new"加载(重新加载页面)时开始使用 fiddle 时，跳转不会发生。或者非常非常非常偶尔地，如果您一直快速移动鼠标(这不是正常的用户行为)。

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

希望对您有所帮助:)