android - 无法通过 translate3d 停止转换的 CSS3 转换

Question

我正在尝试使用 translate3d 通过 CSS3 转换为元素设置动画:JSFiddle .

// for start animation
$("#content")
    .css("-webkit-transition", "all 100s");
    .css("-webkit-transform", "translate(0, -900px)");
// for stop animation
$("#content")
    .css("-webkit-transition", "none");

在桌面 Chrome 和 Safari 中很好，但在 Android 4.1.x(SGSII、Galaxy Nexus 等)上的默认浏览器中，此方法不起作用 - 转换不会停止。此外，我注意到这种情况只是相对 translate3d:使用 translate 和 position CSS Prop (例如“top”、“left”)它有效。

Answer 1

在通过将 webkitTransitionDuration 调整为 0(并将 webkitTransition 设置为 'none' 或 '' 通常暗示这一点)。这可以通过使用 .001ms 或类似的过渡持续时间来规避，尽管这很可能仍会绘制多个帧。

至少在某些设备上更实用的解决方法是为 webkitTransitionDelay 使用负值，强制新的转换生效，但是选择这个值使得转换直接在它的完成状态。

像这样:

e.style.webkitTransition = '-webkit-transform linear 10s';
e.style.webkitTransform = 'translate3d(100px,100px,0)';

# now cancel 10s-long transition in 1s and reset transformation
setTimeout(function() {
    e.style.webkitTransitionDelay = '-10s'
    e.style.webkitTransform = 'translate3d(0,0,0)';
}, 1000)