CSS3 Webkit轉換淡入淡出

我在使用CSS3實現非常簡單的淡入淡出效果時遇到了一些麻煩。這裏是我的場景：CSS3 Webkit轉換淡入淡出

我有一個列表和其中的一些內容。我也有一些鏈接，點擊時過濾列表中的內容。我想要的是，當頁面加載列表淡入時，每次列表被過濾時，列表應該消失並且淡入新內容。

我在頁面載入工作中淡入淡出。但是，當我試圖讓列表消失並再次消失時，我無法讓它工作。

這裏是我創建的jsfiddle來演示我正在嘗試做什麼。 - http://jsfiddle.net/YeKX2/28/

對此的任何幫助表示讚賞。

來源

2011-08-16 levi

在多個網站上發佈相同的問題被認爲是不好的禮儀。我在這裏和Forrst看到了這一點，只能假設有其他地點。原因是它可能在一個地方解決，其他人則浪費他們的時間在其他地方幫助你。 – joshnh

你是對的。我在這裏發佈了這個，因爲最初我沒有得到任何答案，並打算刪除第一篇文章。我的壞 – levi

保持它主要基於WebKit和不使用jQuery，你似乎是，你可以做到以下幾點，以實現自己的目標：

function test(){ 
    document.getElementById('list').style.opacity = "0"; 
    setTimeout("document.getElementById('list').style.opacity = '1';",2000); 
}

你必須玩的時間。

另外，要注意的是，如果要影響-webkit轉換的時間，可以使用以下語法。

document.getElementById('list').style['-webkit-transition'] = "opacity 2s linear";

來源

2011-08-16 02:39:23

我強烈建議包括jQuery庫，如果可能的話。然後，淡化如下：

jQuery（「＃elementId」）。animate（{opacity：0}）; jQuery（「＃elementId」）。animate（{opacity：1}）;

否則，如果在某些瀏覽器（IE）中以不同方式處理不透明度，您將最終遇到瀏覽器問題，並且webkit-transition是一個實驗性的mozilla屬性。

來源

2011-08-16 02:26:26 Coomie

我不想包含JQuery文件大小的問題。我不擔心兼容性問題，因爲它被用於支持webkit轉換的本地WebOs App。 – levi

您可以將這些語句合併爲一個語句，以使代碼更清晰，還可以指定計時器以使其更具體。 $（'＃selector'）。animate（{opacity：1}，2000）.animate（{opacity：1}，2000）;' –

1.對不起，我認爲在CSS3中開發時很奇怪如此不受支持。我發現jQuery克服了許多不兼容問題，但是如果你沒有預料到它們......太棒了。謝謝，我知道這一點。我正在舉例淡入淡出。 – Coomie

CSS3 Webkit轉換淡入淡出

回答

相關問題