相关疑难解决方法(0)

我一直在阅读几个引用,如"X是GPU加速"和"Y不是GPU加速",但我找不到完整列表.CSS3的哪些确切部分是GPU加速的？

您可以通过设置动画持续时间并设置CSS3变换的初始值和最终值来利用硬件加速动画.

如果您不是设置动画持续时间并使用关键帧,而是使用JavaScript直接设置所需CSS3变换的值,该怎么办？你还会利用硬件加速,还是硬件加速被排除？

这件事让我很生气!

我在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);

但事件的目标是RARELY用户点击的球体,因此球体不会以一致的方式从屏幕上消失.

如果球体到达屏幕底部,即转换结束,则单击事件将100%运行.