Javascript 无法与正在转换的html元素交互

这东西快把我逼疯了

我以编程方式在html页面中的另一个div中创建绝对定位的div。外部div为mousedown和touchstart事件注册，内部div使用css3转换开始移动

所有转换都会影响-WebKit transform属性

除了事件处理外，其他一切正常： 在Chrome和Safari中，所有事件都在外部div事件处理程序中捕获，但事件的目标属性很少是div I click

当一个div完成它的转换时，那么事件目标总是正确的，但不是在div转换时。这是虫子吗？？？我错过什么了吗

更新：

以下示例与safari和chrome兼容

以下是一个在线示例，演示了该问题：

球体从屏幕顶部生成，并向屏幕底部移动。当用户单击球体（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%工作。

在使用css3 Transform设置动画时，我遇到了类似的问题。 使用css变换的目的是使用css位置，并为变换设置动画

---

你能在JSFIDLE中展示一个例子吗？@AdamMoszczyński这里有一个与小提琴相关的问题：这没有Transform动画那么好，因为在这种情况下，元素没有被缓存……我无法理解缓存部分。你能解释一下吗？如果你使用transform属性而不是top、left等设置元素的动画，那么由于GPU的加速，性能会更高。如果将translate3d（0,0,0）应用于元素，然后设置左上角属性的动画，则情况也是如此。详情如下：

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