javascript - 如何修复/解决 CSS3 Transitions 的 transitionend 事件的浏览器实现中的不一致？

Question

我设置了一个 jsfiddle here以显示我注意到的一些不一致之处。

• Opera 抛出“奖励”过渡事件供您躲避...
• Firefox 应该是这样吧，还是很郁闷...
• Chrome 不出所料伟大，甚至为我做出假设，如 event.target.style["margin-left"] 给出正确的值，而不是要求我使用event.target.style[event.propertyName.toCamelCase()]

我想知道最简洁的统一方法。谢谢。

Answer 1

不幸的是，考虑到浏览器实现 transitionend 事件的不同状态，最好的方法似乎是检查 event.propertyName REALLY 是您正在寻找的属性(property)。这可以通过根据已知的 object 或 string 检查它来完成，其中包含应该转换的属性的映射。我目前使用的解决方案:

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
    }
}