我假設(shè)你的彈出窗口是絕對定位的,所以你可以做以下事情：

>隱藏時(shí),將彈出窗口設(shè)置為巨大的負(fù)值.這會(huì)將其移出屏幕并擺脫滾動(dòng)條.

>在懸停時(shí),將頂部設(shè)置為正確的值并轉(zhuǎn)換不透明度值.

>確保CSS轉(zhuǎn)換規(guī)則僅適用于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@.

更新：要添加左側(cè)擺動(dòng)并清理鼠標(biāo)移動(dòng)動(dòng)畫,您可以使用以下代碼：

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

}

它這樣做如下：

>指定了多個(gè)屬性的動(dòng)畫(不透明度,左側(cè),頂部).

> transition-delay會(huì)阻止頂部值被更改,直到不透明度和左側(cè)動(dòng)畫完成為止.這里的訣竅是,當(dāng)元素為：懸停時(shí),沒有延遲(不透明度,左側(cè)和頂部動(dòng)畫全部一次開始).但是一旦：懸停不再有效,頂級(jí)動(dòng)畫在開始前等待1秒.這給了不透明度并留下足夠的時(shí)間來完成.

總結(jié)

以上是生活随笔為你收集整理的无法设置html过渡效果,html – CSS3过渡显示无阻止过度滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。