为什么当添加了两个类时，这个CSS转换事件没有触发

Question

CSS

.horizontalTranslate {
    -webkit-transition: 3s;
}
.secondClass {
    background: red;
}

HTML

<div class='box'></div>

JS-

var box = document.querySelector('.box');
box.addEventListener('webkitTransitionEnd', function(evt) {
    alert('Finished transition!');
}, false);
function transitionBox() {
    // this works
    box.className = 'horizontalTranslate';
    // this does not work
    // box.className = 'secondClass horizontalTranslate'; 
}
setTimeout(transitionBox, 100);

当添加了两个类而不是一个类时，为什么转换事件不触发？我还尝试了链接我的CSS选择器la .secondClass.horizontalTranslate { ... }。

Answer 1

原因是box.className = 'horizontalTranslate';实际上正在删除样式，导致CSS转换实际发生。但是当我设置box.className = 'secondClass horizontalTranslate';时，DOM节点的样式不会改变，也不会触发任何事件。

写transitionBox的另一种方法是：

function transitionBox() {
    box.classList.add('horizontalTranslate');
    box.classList.add('blue');
}

如果blue更改box的样式，这也会起作用。