從css3中正確顯示隱藏的元素

我在每個單獨的項目中遇到了這個問題，在這一點上我已經厭倦了。從css3中正確顯示隱藏的元素

我想使用CSS3的，因爲如何漂亮，它光滑的東西淡出動畫相比淡入等

的問題就是，我的東西衰減99％的時間是最初設置爲display:none;（意思，只是有它在opacity: 0開始，並且將其更改爲opacity: 1使用jQuery不夠好

例如，對於我的拖放功能，我有絕對定位的div： #dropzone，這顯然不能覆蓋整個應用程序（但只是設置爲零不透明的整個時間）。

如果我嘗試添加$('#dropzone').show().css('opacity',1)，則不會褪色。

當它完成.show()，它仍然設置爲opacity 0（我知道，因爲如果我停止它在那裏，什麼也不顯示它設置爲display:block與opacity: 0） - 它也已經有了合適的CSS3它transition特性，那麼爲什麼在它遇到.css()時不動畫？

這已經困擾了我很多，我很想解決這個問題或者知道正確的方法。

感謝

http://jsfiddle.net/fPtU5

編輯添加的jsfiddle

來源

2012-11-10 Tallboy

如果你已經設置了display：none，那麼你需要先設置display：block和opacity：1 –

我認爲這是什麼.show（）呢？ – Tallboy

試試jquery動畫功能http://api.jquery.com/animate/ –

我嘗試了一下，然後得到它的工作使用的插件，然後實現代碼實際工作沒有插件，顯然使用過渡。

JSFiddle

$('a').click(function(){ 
    $('div').show().animate({'opacity':1}); 
});

來源

2012-11-10 05:33:40 DSKrepps

沒有插件，它的動畫與fadeIn（）的變體，這大多好，但絕對不是性能（css3是gpu加速）。我從文章中發現，任何時候改變display屬性都會破壞css3動畫並阻止它運行。我不明白爲什麼，但似乎我必須使用可見性：隱藏。但它仍然很難淡出，但是 – Tallboy

那麼'animate'只是從CSS3中提取持續時間並將其應用到它自己的動畫中？它在我的電腦上沒有任何區別。 – DSKrepps

animate（）是一種開箱即用的jquery方法，它迭代地更改不透明度（或任何屬性），儘管其大型元素的資源密集。 Css3是完全不同的，並且更加平滑，但有時候會變得古怪。 – Tallboy

想通了這篇文章的幫助：http://www.greywyvern.com/?post=337#

.dropzone { 
    visibility:hidden; 
    opacity:0; 
    background: rgba(0,0,0,.85); 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 9999; 
    -webkit-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
    -moz-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
    -ms-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
    -o-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
     transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
} 

.opaque { 
    visibility:visible; 
    opacity:1; 
    transition-delay:0s; 
}

然後當你想要觸發淡入/淡出添加/刪除此類

$('.dropzone').addClass('opaque');

來源

2012-11-10 05:53:35 Tallboy

更詳細的CSS，但添加/刪除類是jQuery更好的方法。 – DSKrepps

我不'不知道爲什麼顯示屬性會使css動畫變得柔和，但這裏有一些對原始小提琴有意思的觀察/修改。 http://jsfiddle.net/5RF5A/。即使只是將顯示設置爲block並將不透明度設置爲1之間的延遲ms，也可以使css動畫起作用。

當我嘗試使用css來設置不透明度的動畫時，我總是遇到這個問題，但同時需要display:none才能將元素從文檔流中取出。我通常添加位置：絕對或高度/寬度：0或可見性：隱藏（而不透明度爲0），而不是顯示：無，所以我仍然可以動畫不透明。我的猜測，（我很好奇，在這之後做一些研究），它是某種瀏覽器迴流/重繪的東西。可能會離開，但這就是我要開始尋找的地方

編輯：找到Transitions on the display: property。對這個問題有一些非常好的答案/見解。

來源

2012-11-10 06:02:13 brains911

另一個有趣的提示是，如果您只是使用$（'div'），您也可以看到動畫。show（0）.css（'opacity'，1）; （見http://jsfiddle.net/3leven11/fPtU5/5/）顯然這與show（）的默認顯示時間有關：display：none;同時開始下一個通過CSS觸發動畫的調用。 – samazi

從css3中正確顯示隱藏的元素

回答

相關問題