10

I am using css transitions to set the margin of one of my div. I need to know how can I wait for this effect to end so I can call other function then... Is there any way? I read some other posts on stack overflow but they all look different from my problem.

DOK
  • 32,337
  • 7
  • 60
  • 92
Ricardo Neves
  • 495
  • 3
  • 11
  • 24

2 Answers2

29

Try This SO answer

The transition listner events vary in each browser, so the below function will find which listener to use and return the correct one.

function whichTransitionEvent(){
    var t;
    var 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 transitionEnd = whichTransitionEvent();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

function theFunctionToInvoke(){
// set margin of div here
}
Community
  • 1
  • 1
What have you tried
  • 11,018
  • 4
  • 31
  • 45
  • A beautiful solution. – Mattis Mar 31 '15 at 15:15
  • damn!! you saved my life with that event listener of "transitionend" – msqar Aug 31 '17 at 14:09
  • Since it is also tagged Jquery: `$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", "#myElem", function() { //code to execute after transition});`. It is usually good practice to attach the event to the document so the event will also fire for dynamically created elements. – cytek04 Feb 18 '23 at 15:41
3

You could do it two ways (assuming the transition takes 1 second in each example):

1.) Animate that element with jQuery.animate (instead of CSS transition):

$('#mydiv').animate({
    'margin-left': '10px',
}, {
    duration: 1000,
    complete: function () {
        // do stuff after animation has finished here
    }
});

2.) Animate after a set period of time:

window.setTimeout(function () {
    // do stuff after animation has finished here
}, 1000);

EDIT: I understand that #2 is a bad solution, but I will keep this up in case other people were thinking down the same path I was.

Vinay
  • 6,204
  • 6
  • 38
  • 55
  • 2
    I don't get it. You're down-voting my answer for what I'm assuming is because I've offered a javascript/jQuery solution, yet you've tagged this question with both the javascript and jQuery tags. – Vinay Mar 25 '13 at 15:00
  • 1
    setTimeout is a BAD solution. using animate is a workaround and it's not necessary since there are proper solutions. – David Fregoli Mar 25 '13 at 15:04
  • Gotcha. Well, either way, I'll keep this answer up so people know that it is a bad solution (in case they were thinking the same as me). – Vinay Mar 25 '13 at 15:05
  • 2
    The user didn't ask for a callback function of a jQuery animation, but for a callback of a CSS transitions. ___VERY___ different. – yunzen Mar 25 '13 at 16:50
  • 2
    ^ I was simply saying that that was an option in case he wasn't completely opposed to it (given that he also tagged jQuery on his question). I also put in my edit that I left this answer up so that people would understand that my second solution is a bad solution, so I'm not entirely sure why you're being so hostile @HerrSerker. I didn't know this was a community where someone is harped on for showing what could be a common mistake/wrong as well (to save others time in case they were thinking down the same path - I could have easily taken this answer down to save me from more negative votes). – Vinay Mar 25 '13 at 19:12
  • Why is setTimeout a bad solution? What's wrong with setting the timeout to a value dynamically read: `transition-duration` + `transition-delay`? Seems to work for me (and no jQuery! :) ). –  Jan 01 '17 at 00:33