2

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

// 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 props（例如“top”、“left”）它可以工作。

4

3 回答 3

1

Android 4 上的转换实现似乎有问题，如果通过将转换硬件渲染层调整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)
于 2013-05-02T17:37:16.617 回答
0

这解决了我的（非常相似的）问题：

$el.removeClass('THE_ANIMATION').css('opacity', 0.99);
window.setTimeout(function () {
  $el.css('opacity', 1); 
}, 0);
于 2014-06-09T12:51:39.453 回答
0

这是我通过一些实验发现的：

在 chrome、safari、firefox 和 iphone webview 上停止正在运行的 translate2d 或 3d 可以通过设置“none”转换或具有负或 0 时间延迟的转换并为当前位置提供新的转换来完成，如上所述。

然而，这不适用于 android webview。我能为 android 找到的唯一解决方案是将转换延迟设置为一个小的正数，例如 0.001 秒，并为当前位置提供转换。

请注意，在 iphone webview 中，负转换延迟的解决方案优于“无”或小的正数，这将在执行抢占后续转换之前闪烁正在进行的转换的最终位置。

于 2013-11-12T02:18:01.257 回答