CSS3 过渡 + 无显示 + 防止过度滚动

Question

因此，如果您还不熟悉，CSS3 过渡不会为display: none 设置动画，因为它会从 DOM 中完全移除目标元素。所以这是我的问题。我有一个侧边栏，在悬停时出现较大的弹出 div。不幸的是，由于我只能在 visibility: hidden 和 opacity: 0 上进行转换，因此由于布局中包含可见隐藏的 div，因此我已经过度滚动，因此会在页面的滚动条中显示一个很长的弹出窗口。

寻找一些创造性的解决方案，让我在不搞砸滚动条的情况下仍然可以制作动画。

我正在本地开发，所以我没有要展示的实时示例，但您可以在此截屏视频中看到问题：http://dreamstarstudios.com/screencasts/2011-09-27_2111.swf

提前致谢！

Answer 1

我假设您的弹出窗口是绝对定位的，因此您可以执行以下操作：

1. 隐藏时，将弹出窗口top 设置为一个巨大的负值。这会将其移出屏幕并摆脱滚动条。
2. 悬停时，将top 设置为正确的值并转换opacity 值。
3. 确保您的 CSS transition 规则仅适用于 opacity 属性。

HTML

<a href="">Popup go now</a>
<div class="popup">
    My cat's breath smells like cat food...
</div>

CSS

.popup {
   position: absolute;
   top: -2000px;
   opacity: 0;

   transition: opacity 1s ease-in-out;
}

a:hover + .popup,
.popup:hover {
   top: 30px;
   opacity: 1;   
}

这是上面的in action。

更新：添加左挥杆，清理鼠标移出动画，可以使用以下代码：

.popup {
   position: absolute;
   top: -2000px;
   width: 300px;
   left: 0;
   opacity: 0;

   /* Animate opacity, left and top  
      opacity and left should animate over 1s, top should animate over 0s
      opacity and left should begin immediately.  Top should start after 1s. */
   transition-property: opacity, left, top;
   transition-duration: 1s, 1s, 0s;
   transition-delay: 0s, 0s, 1s;
}

a:hover + .popup,
.popup:hover {
   top: 30px;
   left: 30px;
   opacity: 1;  

   /* All animations should start immediately */
   transition-delay: 0s;
}

它的作用如下：

1. 指定了多个属性的动画（不透明度、左、上）。
2. transition-delay 防止在不透明度和左侧动画完成之前更改顶部值。这里的技巧是当元素为:hover 时，没有延迟（不透明度、左侧和顶部动画都同时开始）。但是，一旦:hover 不再活动，顶部动画会在开始前等待 1 秒。这会提供不透明度并留出足够的时间来完成。

这是updated example。