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

因此，如果您还不熟悉，CSS3 过渡不会产生动画display: none因为它从 DOM 中完全删除了目标元素。这是我的问题。我有一个侧边栏，其中悬停时会出现更大的弹出 div。不幸的是，因为我只能过渡visibility: hidden and opacity: 0由于布局中包含明显隐藏的 div，因此导致页面滚动条中出现一个非常长的弹出窗口，因此我出现了过度滚动。

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

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

提前致谢！

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

1. 隐藏时，设置弹出窗口top到一个巨大的负值。这会将其移出屏幕并摆脱滚动条。
2. 悬停时，设置top到正确的值并转换opacity value.
3. 确保你的 CSStransition规则仅适用于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;   
}

这是上面的内容在行动.

Update：要添加左摆动，并清理mouseout动画，可以使用以下代码：

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

这是更新的例子.