Wait for css transition

Question

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.

Solution 1

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
}

Solution 2

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.

Comments

[Vinay]

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.

[David Fregoli]

setTimeout is a BAD solution. using animate is a workaround and it's not necessary since there are proper solutions.

[Vinay]

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).

[yunzen]

The user didn't ask for a callback function of a jQuery animation, but for a callback of a CSS transitions. VERY different.

[Vinay]

^ 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).

[Mattis]

A beautiful solution.

[Admin]

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! :) ).

[msqar]

damn!! you saved my life with that event listener of "transitionend"