I am trying to add an animationend event to an element, but the event doesn't get fired. What am I doing wrong, and how can I fix it?
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
var timeOutFunc;
btn.addEventListener('click', function() {
elem.classList.add('show');
clearTimeout(timeOutFunc);
timeOutFunc = setTimeout(function() {
elem.classList.remove('show')
}, 1000);
});
elem.addEventListener('animationend', function(e) {
console.log('animation ended');
});#elem {
background-color: orange;
width: 100px;
height: 100px;
opacity: 0;
transition: opacity 500ms ease;
}
#elem.show {
opacity: 1;
transition: none;
}<button id="btn">Press Me</button>
<div id="elem"></div>There are two separate animating events.
When using the css transition use transitionend, and when using @keyframes/animation, use animationend.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments