0

I'm making some rotation for a wheel by using this transition:

transform: rotate(180deg);
transition: transform 10s cubic-bezier(.5,.1,.15,1);

Now, how can I detect the send of the transition with JS ?

Thanks.

PacPac
  • 267
  • 2
  • 8
  • are you expecting a callback in css? – lilsizzo Jun 26 '19 at 03:02
  • Maybe you can add a listener to the [transitionend event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event) and use some logic to discover that the event is related to the target of the transition. If you manage to generate a working example, we can help a little more. – Shidersz Jun 26 '19 at 03:03

2 Answers2

0
function whichTransitionEvent(){
var t,
  el = document.createElement("fakeelement");

var transitions = {
  "transition"      : "transitionend",
  "OTransition"     : "oTransitionEnd",
  "MozTransition"   : "transitionend",
  "WebkitTransition": "webkitTransitionEnd"
}


for (t in transitions){
  if (el.style[t] !== undefined){
    return transitions[t];
    }
 }
}

var transitionEvent = whichTransitionEvent();


    $(".button").click(function(){
    $(this).addClass("animate");
   $(this).one(transitionEvent,
              function(event) {
    alert("The transition has ended!");
    $(this).removeClass("animate");
  });
});

solution using jquery it can detect end of transition

Rahul Rana
  • 455
  • 2
  • 7
0

Try something like this to detect the end of a transition:

The off() method can be used on the callback function to ensure that it will be fired only once.

$("#someSelector")
.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

If you are using pure js then you can use the following:

element.addEventListener("webkitTransitionEnd", callfunction,false);
element.addEventListener("transitionend", callfunction,false);
element.addEventListener("oTransitionEnd", callfunction,false);
element.addEventListener("MSTransitionEnd", callfunction,false);

Further reference : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

Stefan Joseph
  • 545
  • 2
  • 10