Question

I’ve run into an interesting case that isn’t explicitly covered in the W3C CSS Transitions spec or the MDN CSS Transitions doc that I thought I would share because it cost me a bit of time.

If you “change” a CSS transitioned property to the same value then no transitioned event is fired. As I think about I can see why this would be the default behavior, but it can easily cause issues for the unsuspecting developer with something like this:
$("#test").css("opacity", "1").bind("transitionend", doneFn);

In the above code, if the element in question happens to have a opacity of 1 then the doneFn will never be called. Also see http://jsfiddle.net/studgeek/Xj8TB/.

To make this is a question, is there a good workaround for handling this?

You could compare the property value to the existing property value to the existing property value but that is trickier than it sounds to do it well because css property values can take so many forms – different units, and even string values like auto. So you really have to test the objects actual state, which of course needs to be done different for each property. Ugh.

Answer 1

One work-around would be to make your own jQuery method for setting a CSS value that would handle everything for you. It would get the current value of the property, set the new value, check to see if the value had changed. If it had not, then it would fire the completion function manually:

// globally set this to the right transition event for the current browser
// modernizr has ways of using feature detection to know which is the right way to set this
var transitionEvent = "webkitTransitionEnd";

jQuery.fn.transitionTo = function(prop, value, completeFn) {
    var origValue, item;
    for (var i = 0, len = this.length; i < len; i++) {
        item = jQuery(this[i]);
        origValue = item.css(prop);
        item.css(prop, value);

        // if value hasn't changed           
        if (origValue == item.css(prop)) {
            completeFn.apply(this[i]);
        } else {
            this.one(transitionEvent, completeFn);
        }
    }
}

In your example above, it would work like this:

$("#test").transitionTo("opacity", "1", doneFn);

Working example here: http://jsfiddle.net/jfriend00/LHdGR/

This plug-in could be expanded to support passing a map of multiple properties like the .css() supports too.

The only other option I can think of is to read the transtionDuration and set a timeout value for slightly longer than that. If the transitionEnd event fires, you cancel the timeout. If it doesn’t fire, the timeout can manually fire the transitionEnd event. The code for this could work like this:

var transitionEvent = "webkitTransitionEnd";
var transitionDuration = "WebkitTransitionDuration";

// get transition duration in decimal seconds
// this only returns the first transition time if there are multiple ones specified
jQuery.fn.getDuration = function() {
    var val = this.css(transitionDuration);
    if (!val) {
        val = "0s";
    }
    var num = parseFloat(val);
    var units = val.replace(/\d\., /g, "");
    if (units.indexOf("ms") == 0) {
        num /= 1000;
    }
    return(num);
}

// set a guaranteed transition event that will always fire, even if
// no CSS transition is triggered
jQuery.fn.setTransitionEvent = function(completeFn) {
    var item, duration;
    for (var i = 0, len = this.length; i < len; i++) {
        item = jQuery(this[i]);
        duration = Math.ceil((Number(item.getDuration()) + 0.1) * 1000);
        (function(t, o) {
            var timeout = setTimeout(function() {
                completeFn.apply(o);
                o.unbind(transitionEvent);
            }, duration);
            o.one(transitionEvent, function() {
                clearTimeout(timeout);
            });
        })(duration, item);
    }
}

Working example here: http://jsfiddle.net/jfriend00/hxevW/