通过淡入和淡出以块形式对文本进行动画处理

Question

I have a div which content is changed dynamically by a script and I wanna add fade-in and fade-out animation on text when it's being changed. How can I do it using CSS or pure JS? All the solutions I've seen so far involved jQuery, while I'm interested in pure CSS and/or JS.

Answer 1

Fade Out:

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);
};

Fade In:

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);
};

Also this fiddle seems amazing: http://jsfiddle.net/gabrieleromanato/cMp7s/

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