无法设置html过渡效果,html – CSS3过渡显示无阻止过度滚动

我假设你的弹出窗口是绝对定位的,所以你可以做以下事情：

>隐藏时,将弹出窗口设置为巨大的负值.这会将其移出屏幕并摆脱滚动条.

>在悬停时,将顶部设置为正确的值并转换不透明度值.

>确保CSS转换规则仅适用于opacity属性.

HTML

Popup go now

My cat's breath smells like cat food...

CSS

.popup {

position: absolute;

top: -2000px;

opacity: 0;

transition: opacity 1s ease-in-out;

}

a:hover + .popup,.popup:hover {

top: 30px;

opacity: 1;

}

这是上面的@L_502_2@.

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

.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;

}

它这样做如下：

>指定了多个属性的动画(不透明度,左侧,顶部).

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