divで遷移が終了し、すべてのCHILD divで遷移が終了すると、webkitTransitionEndイベントが発生しますか？

Question

すべて、

私は大体このようになりますような状況があります。

マイHTMLページaは、私が移行を実行していた（私は「parentDiv」を呼びます）のdivが含まれています。その移行が終了すると、それは、「onTransitionEndParent」

がparentDivは私が異なるの移行を行っていた（私は「childDiv」を呼びます）のdivが含まれているを呼び出す必要があります。そのトランジションが終了すると、"onTransitionEndChild"を呼び出す必要があります。

だから、私のコードは、おおよそ次のようになります。

parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false); 
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false); 

私が見つけてる問題...

onTransitionEndParentをするときparentDivの移行が終了する（訂正）と呼ばれています。しかし、それは

• childDivの遷移がonTransitionEndParentが呼び出される
• を終了したときonTransitionEndChildが呼び出される...つまりALSOが

  （...私が期待したものではない）childDivの移行が終了すると呼ばれていますchildDivの遷移が

この番目ですが終了したときにparentDivの移行は AND AGAINを終了します正しい動作をしているのですか？何か間違っていますか？

onTransitionEndParentは、parentDivのトランジションが終了したときにのみ呼び出され、子divのトランジションの終了時には必ず呼び出されません。

事前に感謝します。

Answer 1

transitionEndは、子供から親に派遣（バブルアップ）されているいわゆるバブリングイベントです。あなたのための

オプション：

1. どちらのイベントオブジェクトのプロパティevent.targetを分析する - それが エンドの移行を持つ要素を含める必要があります。
2. または、各子要素にtransitionEndイベントハンドラをインストールし、そのバブルを防ぐために event.stopPropagation()を呼び出します。

Answer 2

最後のクロム更新後に同じ問題が発生しました。子アニメーションが親のアニメーションをトリガーしました。これは、Chrome for desktopでのみ発生し、FFやChrome for Mobileでは発生しませんでした。私が使用してこれを解決興味がある人々のために

：

 $(element).on("animationend webkitAnimationEnd", function(){ 
      //do something 
     }) 
     .children().on("animationend webkitAnimationEnd", function(){ 
      return false; //you can just use event.stopPropagation() 
     }); 

Answer 3

をC-笑顔が答える@に追加するには、event.propertyNameをチェックすると、要素の複数のトランジションがある場合に役立ちます。たとえば、 -

button.addEventListener('transitionend', function(event) { 
    if (event.target.classList.contains('button') && event.propertyName === 'opacity') { 
    button.classList.add('hide'); 
    } 
}, false);