Jonathan Jonathan - 6 months ago 48
Javascript Question

transitionend event fires twice

I have the following code and my problem is that the

transitionend
event is fired twice. I don't know what's causing this. I suspected the vendor prefixes caused it, but they don't. Even if I only leave
transitionend
and
transition
it will still fire twice.

CSS

transition: 1s ease-out;


JS

document.addEventListener('click', function (e) {
var submarine = document.querySelector('.submarine');
var submarineX = e.clientX - submarine.offsetWidth / 2;
var submarineY = e.clientY - submarine.offsetHeight / 2;

submarine.style.left = submarineX + "px";
submarine.style.top = submarineY + "px";
});

document.addEventListener('transitionend', function (event) {
console.log(event.type + " " + new Date().getTime());
});


Fiddle



document.addEventListener('transitionend', function (event) {
console.log(event.type + " " + new Date().getTime());
});

document.addEventListener('click', function (e) {
var submarine = document.querySelector('.submarine');
var submarineX = e.clientX - submarine.offsetWidth / 2;
var submarineY = e.clientY - submarine.offsetHeight / 2;

submarine.style.left = submarineX + "px";
submarine.style.top = submarineY + "px";
});

.submarine {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
transition: 1s ease-out;
}

<div class="submarine"></div>




Answer

transitionend fires for each property transitioned, in your case top and left.

You can access the property associated with the event at event.originalEvent.propertyName.

There's no "transitionsend" event, so you will probably need some hackiness such as filtering the transitionend callback handling for only one of the transitioned properties. E.g.:

function (event) {
    if (event.originalEvent.propertyName == 'top') {
        //put your code here
    }
});

ps. No browser fires the MSTransitionEnd event. It was at some point in the MS docs, but sometime before the IE10 beta release it was replaced by the standard transitionend event.