[JavaScript/JQuery] Problem With TransitionEnd Event

Question

Transitionend event is an event that triggers when CSS transition is finished.

I definitely need transitionend event for my project.

So I made a simple demo.
https://code.sololearn.com/Wpy7i4s4a91v/?ref=app

But I got a new problem...
It fires 2times on same transition end.
(maybe the reason is in css - transition: all 0.5s)

How can I make transitionend trigger only once without altering css or using mutation observer.

I need something like stopImmediatePropagation() method when same event trigger.

Answer 1

It triggers twice due to transition all.
Transition left and transition top both fire the event.

Try to condition it by e.propertyName.

I think you might need to use Javascript, not jQuery.
Coz jQuery event does not carry propertyName property.

Answer 2

@Calvin
Oh Thats why it throw undefined when I used e.propertyName...
Thanks I'll try it with js.

Answer 3

@Calvin
Thank you for your effort. :D
But, I want to trigger this event when just left position is moved.

It may not work If I do like
box.css({ left: "+=20px" })

Answer 4

Try this

https://code.sololearn.com/Wbe34rf0oR5j/?ref=app

Answer 5

This is tricky. You might need to keep track of the triggering time frame.