Why does this callback not unbind itself to transitionEnd after completing one animation?

Question

hi im trying to bind a function to webkitTransitionEnd using jquery's .one method. when i do:

$element.one( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function(e) { 
    $element.removeClass( ".alert-resets" ) 
 });

it doesn't unbind to the transitionend event. instead it removes the class every time it does the transition

heres the jsfiddle: http://jsfiddle.net/DVC5A/

ok i found this solution on SO:

How do I normalize CSS3 Transition functions across browsers?

The docs for .one() explicitly state: "If the first argument contains more than one space-separated event types, the event handler is called once for each event type.". Look at the console here: http://jsfiddle.net/DVC5A/2/ — antishok, May 26 '13 at 21:57
can you post this as answer with a possible solution, so i can mark it as the answer — Masu, May 26 '13 at 22:04
i tested it in jsfiddle, and that seems to be the case. i used just one event name, and it worked fine. — Masu, May 26 '13 at 22:06
how can i use all possible vendor prefixes and just bind to one event? — Masu, May 26 '13 at 22:08
ok i found this SO answer: http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers — Masu, May 26 '13 at 22:09

1nfiniti · Answer 1 · 2013-05-31T14:34:20.940

Don't use one()... use on() (like normal) and then unbind your event handler with off() at the end of your transition end event handler

$("#button-element").on('click', function(e){
    var transEnd = 
        "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd";

    // ... trigger your css3 transition
    $('#el').addClass('whatever');

    // then ...
    $('#el').on(transEnd, function (e) {
        // do stuff
        $('#el').removeClass('whatever');

        //unbind event handler
        $('#el').off(transEnd);

    });

}

score 3 · Accepted Answer · answered May 26 '13 at 22:09

The docs for .one() explicitly state: "If the first argument contains more than one space-separated event types, the event handler is called once for each event type.".

I don't know if there is a more proper way to deal with this type of event (listening for only one event name would probably work but I donno how that'd work cross-browser). But in any case you can just unbind it yourself with .off(), and you can use an event namespace to make that easier:

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");

    $(".block").on("transitionend.my MSTransitionEnd.my webkitTransitionEnd.my oTransitionEnd.my", function (e) {
        var el = $(this);
        el.off('.my');
        setTimeout(function () {
            el.removeClass("in");
        }, 3000);
    });
});

JSFiddle: http://jsfiddle.net/DVC5A/6/

see http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers — Masu, May 26 '13 at 22:11

score 1 · Answer 3 · answered May 26 '13 at 21:50

I really don't get what you're trying to do, but I'll try anyway? This is your code:

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");

    $(".block").one("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function (e) {
        console.log('pl')
        setTimeout(function () {
            $(".block").removeClass("in");
        }, 3000);
    });
});

So everytime you click the button you rebind the transitionEnd event for one() more time as the event handler is inside the click event handler for the button, so of course it removes the class everytime you click the button?

To attach the transitionEnd event handler just one time for each time the document loads, just move the event handler out of the click function for the button ?

$(".my_butt").on("click", function (e) {
    $(".block").addClass("in");
});

$(".block").one("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function (e) {
    setTimeout(function () {
        $(".block").removeClass("in");
    }, 3000);
});

yea, sorry for the brain fart, thats right, thats what i wanted to do, thank you. — Masu, May 26 '13 at 21:54

Why does this callback not unbind itself to transitionEnd after completing one animation?

3 Answers3