使用淡入淡出動畫改變塊的文本

Question

我有一個div，其內容由腳本動態更改，我想在文本被更改時添加淡入和淡出動畫。我怎樣才能使用CSS或純JS？到目前爲止，我所見過的所有解決方案都涉及jQuery，而我對純CSS和/或JS感興趣。

Answer 1

淡出：

var fadeout = function(elem) { 
var o = 1; 
var timer = setInterval(function() { 
    if (o <= 0.0) { 
     clearInterval(timer); 
    } 
    elem.style.opacity = o; 
    elem.style.filter = 'alpha(opacity=' + o * 100 + ")"; 
    o -= 0.1; 
}, 25); 
}; 

淡入：

var fadein = function(elem) { 
var o = 0; 
var timer = setInterval(function() { 
    if (o >= 1.0) { 
     clearInterval(timer); 
    } 
    elem.style.opacity = o; 
    elem.style.filter = 'alpha(opacity=' + o * 100 + ")"; 
    o += 0.1; 
}, 25); 
}; 

而且這似乎小提琴驚人： http://jsfiddle.net/gabrieleromanato/cMp7s/

純CSS： http://fvsch.com/code/transition-fade/test5.html