下面是一个简化的测试用例:
var div = document.createElement('div');
div.classList.add('test');
document.body.appendChild(div);
window.setTimeout(
function() {
div.style.boxShadow = '0 0 100px blue';
div.ontransitionend = function() {
console.log('transition end');
};
div.onclick = function() {
console.log('click');
};
}, 100);
div.test {
width: 100px;
height: 100px;
background: red;
box-shadow: none;
transition: box-shadow 1s;
}
onclick
消息,但转换的结束不会触发“转换结束”消息。将事件处理程序更改为这样可以工作:
div.addEventListener('transitionend', function() { console.log('transition end'); } );
addEventListener
?
MDN
ontransitionend
应该像我写的那样工作,到处搜索,Chrome确实支持它(事实上我记得以前使用它没有任何问题)。值得注意的是,在Chrome中,MDN页面上显示的示例对我不起作用(不显示“缩放”和“完成”文本)。
