CSS3過渡+顯示無+防止過度滾動

Question

因此，如果你不熟悉，CSS3過渡不動畫display: none，因爲它完全從DOM中移除目標元素。所以這是我的問題。我有一個更大的彈出窗口div的側欄，出現在懸停。不幸的是，由於我只能在visibility: hidden和opacity: 0上轉換，因爲隱藏的div包含在佈局中，導致過度滾動，因此會在頁面的滾動條中佔用很長的彈出窗口。

尋找一些創造性的解決方案，我仍然可以在沒有滾動條的情況下進行動畫製作。

我開發本地，所以我沒有一個活生生的例子來展示，但你可以在這個截屏看到的問題：提前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; 
} 

這裏的上述in action。

更新：添加左擺，並清理鼠標移開動畫，可以使用下面的代碼：

.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秒鐘。這給了不透明度並留下足夠的時間來完成。

這是updated example。