CSS3トランジションのtransitionendイベントのブラウザ実装における不具合を修正/回避するにはどうすればよいですか？

Question

私が気付いている不一致のいくつかを示すために、hereを設定しました。

• OperaはFirefoxはChromeがさえなって、予想通り素晴らしいある
• ...まだイライラしている、それがあるべきとしておそらくある
• ...かわすにあなたのための「ボーナス」遷移イベントをスローしますevent.target.style["margin-left"]のような私のための仮定が正しい値を与える代わりに、私はこれを可能な限りクリーンな統一されたアプローチを知りたいevent.target.style[event.propertyName.toCamelCase()]

を使用するために私を必要とします。ありがとう。

Answer 1

はオペラを回避するために、私は

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

これ（またはしない）、あなたのニーズに合うかもしれない視覚的に明らかではないプロパティをアニメーション。

Answer 2

は、残念ながら、最善のアプローチはevent.propertyNameREALLYは、あなたが探している性質であることを確認することであると思われるtransitionendイベントのブラウザ実装の異種の状態を与えられました。これは、移行すべきプロパティのマップを含む既知の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 
    } 
}