我假设你的弹出窗口是绝对定位的,所以你可以做以下事情：
>隐藏时,将弹出窗口设置为巨大的负值.这会将其移出屏幕并摆脱滚动条.
>在悬停时,将顶部设置为正确的值并转换不透明度值.
>确保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秒.这给了不透明度并留下足够的时间来完成.
