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

Question

因此,如果您还不熟悉,CSS3过渡不会生成动画,display: none因为它会完全从DOM中删除目标元素.所以这是我的问题.我有一个带有较大弹出窗口的侧边栏,显示在悬停状态.不幸的是因为我只能在过渡visibility: hidden和opacity: 0我有反弹时,由于被包括在布局中明显隐藏层,从而使得其在页面的滚动条占了一个很长的弹出窗口.

寻找一些创造性的解决方案,我仍然可以动画,而不必将滚动条搞砸.

我正在开发本地,所以我没有显示的实例,但你可以在这个截屏视频中看到问题: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秒.这给了不透明度并留下足够的时间来完成.

这是更新的例子.