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

Question

因此，如果您还不熟悉的话，CSS3 过渡不会对 display: none 进行动画处理，因为它会从 DOM 中完全删除目标元素。这是我的问题。我有一个侧边栏，其中悬停时会出现更大的弹出 div。不幸的是，由于我只能在 visibility: hide 和 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;   
}

这是上面的实际操作。

更新：要添加向左摆动，并清理鼠标移出动画，可以使用以下代码：

.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 秒。这会产生不透明度并留出足够的时间来完成。

这是更新的示例。