javascript - CSS3 过渡在 setInterval 内时无法设置动画

Question

我首先要说的是我已经使用 JQuery .animate 让它工作，但我想提高性能并尝试使用 CSS3 过渡。

当我添加“transition: opacity 0.6s;”到标签并使用 jquery 更改 css 值，单词正确生成但淡入淡出动画消失了。原始的 JQuery 方法如下所示:

start 4 animations to opacity:0
for loop that generates 4 new words inside a setTimeout
start 4 animations to opacity:1

我觉得奇怪的是，动画只在我完全注释掉 setTimeout 和 setInterval 后才开始工作。将其中任何一个放入其中都会使其停止工作。这让我觉得很奇怪，因为它们在这里的使用是不相关的 (afaik)。我四处搜索，看到有人提到这些与 css3 转换相关的功能，但我一直无法找到任何可以解释这里可能发生的事情的内容。

function printWords() {
    var words = ["list","of","random","words"];

    var selectors = ['div#northSlogan', 'div#eastSlogan', 'div#southSlogan', 'div#westSlogan'];

    /* populate array with numbers 0 through # of elements in 'words' array */
    var nums = [];
    for (var i=0; i < words.length; i++) {nums[i] = i;}

    /* fade out all slogan divs */
    for(var i=0; i < 4; i++) {
        //$(selectors[i]).animate({opacity:0}, 600);
        $(selectors[i]).css({opacity: 0});
    }

    /* generate random index and fill slogan div with chosen text */
    //setTimeout(function() {
        for (var i=0; i < 4; ++i) {
            var index = Math.floor(Math.random()*nums.length);
            document.querySelector(selectors[i]).innerHTML = words[nums[index]];
            nums.splice(index, 1);
        }
    //}, 600);

    /* fade in all slogan divs */
    for(var i=0; i < 4; i++) {
        //$(selectors[i]).animate({opacity:0.5}, 600);
        $(selectors[i]).css({opacity: 1});
    }
}

printWords();
setInterval(printWords, 5000);

所以我的问题是，干扰这些转换的 setInterval 和 setTimeout 函数是什么？我正在做的事情可行吗，还是我的做法完全错误？

PS:我最初在那里有 setTimeout 函数，所以单词生成会在动画到 opacity:0 发生之后发生，否则你可以在淡入淡出开始之前看到变化发生。因为我同时启动了 4 个动画，所以我不想在 for 循环中使用回调。

Answer 1

您正在寻找这样的东西吗？ http://jsfiddle.net/dJQ5t/

    var selectors = ['div#northSlogan', 'div#eastSlogan', 'div#southSlogan', 'div#westSlogan'];
    var words = ["list","of","random","words"];
function printWords() {

    /* populate array with numbers 0 through # of elements in 'words' array */
    var nums = [];
    for (var i=0; i < words.length; i++) {nums[i] = i;}

    /* fade out all slogan divs */
    for(var i=0; i < 4; i++) {
        $(selectors[i]).removeClass('opaque');
    }

    /* generate random index and fill slogan div with chosen text */
    setTimeout(function() {
        for (var i=0; i < 4; ++i) {
            var index = Math.floor(Math.random()*nums.length);
            document.querySelector(selectors[i]).innerHTML = words[nums[index]];
            nums.splice(index, 1);
        }
        /* fade in all slogan divs */
        for(var i=0; i < 4; i++) {
            $(selectors[i]).addClass('opaque');    
        }
    }, 600);


}

printWords();
setInterval(printWords, 5000);

---

div#northSlogan,div#eastSlogan,div#southSlogan,div#westSlogan{
    opacity:0;
    transition: opacity 0.6s;
}
.opaque{
    opacity: 1 !important;
}

---