2
  • 我有一个带有右侧菜单（绿色）的 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。

4

2 回答 2

1

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

唯一可靠的方法是当我对你的小提琴应用更改并run开始发生跳跃时。

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

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

我希望这有帮助 ：）

于 2015-10-22T15:28:29.337 回答
0

以下对我有用。我只是删除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，这个版本translateX也适用于我。你的旅费可能会改变。

于 2015-10-22T16:16:00.280 回答