5

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

HTMLページの別のdiv内にプログラムで絶対配置されたdivを作成します。外側の div はイベントに登録されmousedown、touchstart内側の div は css3 トランジションを使用して動き始めます。

すべての遷移が-WebKit-transformプロパティに影響します。

イベント処理を除いて、すべて正常に動作します。Chrome と Safari では、すべてのイベントが外側の div イベント ハンドラーでキャッチされますが、イベントのターゲット プロパティが、クリックした div になることはめったにありません。

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

アップデート：

次のサンプルは、Safari および Chrome と互換性があります。

問題を示すオンライン サンプルを次に示します: 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% 機能します。

4

1 に答える 1

1

css3 Transform を使用してアニメーション化するときに、同様の問題に直面しました。css transform を使用する代わりに、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";
于 2013-11-18T07:46:11.300 に答える