html – CSS3过渡显示无阻止过度滚动

概述因此,如果您还不熟悉, CSS3过渡不会为display：none设置动画,因为它会完全从DOM中删除目标元素.所以这是我的问题.我有一个带有较大d出窗口的侧边栏,显示在悬停状态.不幸的是,因为我只能在可见性上进行转换：隐藏和不透明度：0由于在布局中包含了明显隐藏的div而导致过度滚动,因此在页面的滚动条中会占用很长的d出窗口. 寻找一些创造性的解决方案,我仍然可以动画,而不必将滚动条搞砸. 我正 因此,如果您还不熟悉,CSS3过渡不会为display：none设置动画,因为它会完全从DOM中删除目标元素.所以这是我的问题.我有一个带有较大d出窗口的侧边栏,显示在悬停状态.不幸的是,因为我只能在可见性上进行转换：隐藏和不透明度：0由于在布局中包含了明显隐藏的div而导致过度滚动,因此在页面的滚动条中会占用很长的d出窗口.

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

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

提前致谢！

解决方法 我假设你的d出窗口是绝对定位的,所以你可以做以下事情：

>隐藏时,将d出窗口设置为巨大的负值.这会将其移出屏幕并摆脱滚动条.
>在悬停时,将顶部设置为正确的值并转换不透明度值.
>确保CSS转换规则仅适用于opacity属性.

HTML

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

CSS

.popup {   position: @R_404_4613@;   top: -2000px;   opacity: 0;   Transition: opacity 1s ease-in-out;}a:hover + .popup,.popup:hover {   top: 30px;   opacity: 1;   }

这是上面的in action.

更新：要添加左侧摆动并清理鼠标移动动画,您可以使用以下代码：

.popup {   position: @R_404_4613@;   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;}

它这样做如下：

>指定了多个属性的动画(不透明度,左侧,顶部).
> Transition-delay会阻止顶部值被更改,直到不透明度和左侧动画完成为止.这里的诀窍是,当元素为：悬停时,没有延迟(不透明度,左侧和顶部动画全部一次开始).但是一旦：悬停不再有效,顶级动画在开始前等待1秒.这给了不透明度并留下足够的时间来完成.

这是updated example.

总结

以上是内存溢出为你收集整理的html – CSS3过渡显示无阻止过度滚动全部内容，希望文章能够帮你解决html – CSS3过渡显示无阻止过度滚动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。