javascript | transitionend not firing

Question

我目前正在尝试使用Javascript和CSS3制作我自己的Javascript通知系统并利用它的动画。

我想检测元素转换何时完成，因此我可以从DOM中删除元素。

该动画被称为animate-out这是我在CSS3中使用2个关键帧制作的自定义动画。

我在通知上有一个关闭按钮，当我点击它时会添加一个类is-closed。一旦关闭动画完成后，我希望能够检测到这一点，目前我试图通过使用console.log('finished');找出这个问题，但是好像事件并没有被解雇。

这里是我当前的代码：

const close = document.querySelector('.close'); 
const notice = document.querySelector('.notice') 

close.addEventListener('click', function() { 
    notice.classList.add('is-closed'); 
}); 

notice.addEventListener('webkitTransitionEnd', function() { 
    console.log('finished'); 
}); 

notice.addEventListener('transitionend', function() { 
    console.log('finished'); 
}); 

Answer 1

如果您使用关键帧，那么你正在使用动画和过渡不。

相关事件animationend

又读Using animation events