Javascript 添加元素而不是删除元素时应用转换

我正在研究一个小的过渡效果，div的背景色每4秒改变一次，问题是，只有当添加背景色而不是删除背景色时，背景色才会随过渡而改变：

HTML:：

<div class="test-it" id="test-it">
    HELLO
</div> 

JS代码：：

(function() {

    var apollo = {};

    apollo.hasClass = function(elem, className) {
        return elem.classList.contains(className);
    };

    apollo.addClass = function(elem, className) {
        elem.classList.add(className);
    };

    apollo.removeClass = function(elem, className) {
        elem.classList.remove(className);
    };

    apollo.toggleClass = function(elem, className) {
        elem.classList.toggle(className);
    };

    window.apollo = apollo;

})();

apollo.addClass(document.body, 'test');

apollo.addClass(document.getElementById('test-it'), 'red');

var $str = apollo.hasClass(document.getElementById('test-it'), 'red');


var run = function() {

    setTimeout(function() {
        apollo.toggleClass(document.getElementById('test-it'), 'red');
        setTimeout(function() {
            run();
        }, 2000);

    }, 2000);

}

run();

console.log($str);

不要深入研究JS代码，因为错误或期望的行为需要出现在CSS中，那么有人能解释一下为什么在类

.red

关闭时没有应用转换吗

类.red具有以下CSS:：

.red {
    background: red;
    -webkit-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}

那么，为什么在下课时2秒的过渡不适用

多谢各位

---

亚历克斯-z

您需要将转换应用于主元素，因为一旦删除

.red

类，转换就不再是元素的一部分，因此就没有转换了

所以你的CSS应该是这样的

.test-it {
                height: 200px;
                width: 200px;
                background: #eee;
                line-height: 200px;
                text-align: center;
                font-family: verdana;
                text-transform: uppercase;
                color: #fff;
                font-size: 40px;
                font-weight: bold;
                -webkit-transition: 2s;
                -o-transition: 2s;
                transition: 2s;
            }
            .red {
                background: red;
            }

---

谢谢我已经试过了，而且成功了，但我想知道为什么？谢谢你的解释！没问题！但也要记住，只要将转换设置得尽可能宽，就会转换每个属性，如果您只想转换背景色，请使用

transition:background color 2s

此外，如果您觉得这回答了您的问题，请不要忘记标记为答案：）

.test-it {
                height: 200px;
                width: 200px;
                background: #eee;
                line-height: 200px;
                text-align: center;
                font-family: verdana;
                text-transform: uppercase;
                color: #fff;
                font-size: 40px;
                font-weight: bold;
                -webkit-transition: 2s;
                -o-transition: 2s;
                transition: 2s;
            }
            .red {
                background: red;
            }