How to fix/workaround inconsistency in browser implementations of the transitionend event for CSS3 Transitions?

问题

I set up a jsfiddle here to show some of the inconsistencies I'm noticing.

Opera throws 'bonus' transition events for you to dodge...
Firefox is probably as it should be, which is still frustrating...
Chrome is predictably great, even making assumptions for me like event.target.style["margin-left"] giving the correct value instead of requiring me to use event.target.style[event.propertyName.toCamelCase()]

I'd like to know the cleanest possible unified approach to this. Thanks.

回答1:

Unfortunately given the disparate state of browser implementations of the transitionend event it seems the best approach is to check that the event.propertyName REALLY is the property you are looking for. This can be done by checking it against a known object or string which contains a map of the properties that should be transitioning. The current solution I used:

function transitionEndHandler(event) {
    if(
        (
            (event.propertyName in event.target.style) && 
            // BLESS CHROME'S HEART THIS IS ALL I NEED TO CHECK FOR THEM

            (event.target.style.cssText.indexOf(event.propertyName) !== -1) 
            // FIREFOX WILL PASS THIS CONDITION, AS IT DOESN'T THROW EVENTS FOR PROPERTIES YOU DIDN'T SPECIFICALLY BIND

        ) || 
        (
            (event.propertyName.replace(/-([a-z])/gi, function(s, group1) {
            // OPERA SURE DOESN'T WANT TO MAKE THIS EASY, IT WONT FIND A 'margin-left' in STYLE
            // SO I HAVE TO LOOK FOR 'marginLeft' INSTEAD THIS MAKES event.propertyName and event.target.style
            // ESSENTIALLY USELESS INSIDE THE TRANSITIONEND EVENT HANDLER
                    return group1.toUpperCase();
                }) in event.target.style) && 
            (event.target.style.cssText.indexOf(event.propertyName) !== -1)
            // AGAIN WE HAVE TO CHECK TO MAKE SURE WE ACTUALLY 'SET' THIS STYLE PROPERTY ON THE ELEMENT
            // AS OPERA THROWS AN TRANSITIONEND EVENT FOR opacity WHEN YOU SET marginLeft
        )
    ) {
        // THIS EVENT.PROPERTYNAME, IS ACTUALLY A PROPERTY I TRANSITIONED,
        // NOT JUST ANY PROPERTY THE BROWSER DECIDED IT WANTED TO TRANSITION FOR ME
    }
}

回答2:

To work around Opera I animated a property that wouldn't be visually evident

element.addEventListener(transition_event,function(ev){
    if(ev.propertyName == "min-width") {
      // do stuff;
    }
}, false);

This might (or not) suit your needs.

来源：https://stackoverflow.com/questions/8423221/how-to-fix-workaround-inconsistency-in-browser-implementations-of-the-transition

标签

javascript

events

css3

opera

css-transitions