CSS過渡突然停止

我已經添加了全屏覆蓋導航到我的小博客，我用這個代碼：http://tympanus.net/Development/FullscreenOverlayStyles/index.html CSS過渡突然停止

正如你所看到的，過渡十分流暢，尤其是當你關閉覆蓋。但是，在我的網站關閉動畫突然停止：（點擊圖標旁邊的標誌）

http://blog.thomasveit.com/

我因子評分的問題可能是一個元素的高度，因爲我知道，這是一個常見的問題Javascript/jQuery動畫，但這並沒有解決問題...

任何人都知道這個問題可能是什麼？

2014-04-08 Tommy

注意此代碼在引導CSS文件（行4908）

.close:hover, 
.close:focus { 
    color: #000000; 
    text-decoration: none; 
    cursor: pointer; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
}

這將設置一個.close元素的不透明度爲0.5 onHover選項。你的陰影恰好有這個類，當它在屏幕上時，你將它懸停在它上面，將其最小不透明度設置爲0.5，直到它被移除。如果您點擊關閉，然後將鼠標快速移出瀏覽器窗口，則過渡是完美的。

請注意，此類（.close）被添加到元素時關閉按鈕被單擊並刪除元素完全消失時。

一旦從DOM中刪除它，就停止將它懸停在它上面，但在此時，最後50％的不透明度立即被刪除。

刪除opacity: 0.5;和filter: alpha(opacity=50);並且轉換是穩定的。

來源

2014-04-08 07:50:08 David

你是老闆！ :-) – Tommy

@ user1879534很高興幫助 – David

另一個快速的問題：在firebug中（.close）類只是第二次可見。我怎麼能看到這更長的？ – Tommy

我認爲你不應該使用不透明動畫來組合可見性：hidden或display：none。如果僅在不具有所有可見性屬性的情況下使用不透明度，會發生什麼情況。此動畫突然停止的原因還在於其他規則的執行。正當你的動畫正在執行。

來源

2014-04-08 07:57:09

但那只是我的直覺。我沒有看到這一點。 –

CSS過渡突然停止

回答

相關問題