移行中のhtml要素と対話できません

Question

このことが私を怒らせています！

htmlページの別のdivの中にプログラムで絶対配置されたdivを作成します。外部divはmousedownイベントとtouchstartイベント用に登録され、内側divはcss3遷移を使用して移動を開始します。

すべてのトランジションは、-WebKit-transformプロパティに影響します。

イベントハンドリングを除いてすべて正常に動作します： ChromeとSafariでは、すべてのイベントが外部divイベントハンドラでキャッチされますが、イベントのターゲットプロパティはほとんど表示されません。

divが終了すると、イベントターゲットは常に正しいものになりますが、divが遷移している間は正しくなりません。これはバグですか？何か不足していますか？

UPDATE：

次のサンプルは、ここではサファリとクロム

と互換性がありますが、問題をdemostratesオンラインサンプルです：http://jsfiddle.net/qfn7F/4/

球は、画面の上から生み出されますと、その底に向かって移動しています。ユーザーが球をクリックすると（mousedownイベント）、クリックされた球は画面から消えなければなりません。ここで

は球との相互作用を処理するコードです：

container.addEventListener(onSelect, function() { 
    if (event.target.classList.contains("transition")) { 
     var tDiv = event.target; 
     var box = tDiv.getBoundingClientRect(); 
     var durationEase = "0.25s linear"; 
     tDiv.style.pointerEvents = "none"; 
     tDiv.style.webkitTransform = "translate3d(" + box.left + "px," + box.top + "px, 1px)"; 
     tDiv.style.opacity = 0; 
     tDiv.style.webkitTransition = "opacity " + durationEase; 
    } 
    event.preventDefault(); 
    event.stopPropagation(); 
}, false); 

が、イベントのターゲットはほとんどのユーザーがクリックした球ではないので、球は一貫した方法で画面から消えません。

球が画面の下部に到達した場合、つまり遷移が終了すると、クリックイベントは100％機能します。

Answer 1

css3 Transformを使用してアニメーションを作成すると、同様の問題が発生しました。 CSSはCSSに位置使用を変換し、

jsfiddle.net

tDiv.style.top = (tDiv.offsetWidth * 0.5 + Math.random() * (window.innerWidth - tDiv.offsetWidth)) + "px"; 
tDiv.style.right = (window.innerHeight - tDiv.offsetHeight) + "px";