CSS3 Webkit轉換淡入淡出

Question

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

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

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

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

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

Answer 1

保持它主要基於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"; 

Answer 2

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

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

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