javascript - 添加元素时应用过渡，而不是删除元素

Question

我正在研究一个小的过渡效果，其中 div 的背景颜色每 4 次变化一次，问题是，只有当 添加 背景颜色而不是 < strong>删除背景颜色:

HTML::

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

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

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

和 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。

Answer 1

您需要将过渡应用到主元素，因为一旦删除 .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;
            }