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

使用淡入和淡出功能对块中的文本进行动画更改

1 个答案: