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的样式，则也可以。

为什么在添加两个类时不会触发此CSS转换事件？

1 个答案: