Question

我正在尝试使用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：翻译和位置CSS道具（例如“顶部”，“左”）它可以工作。

Answer 1

如果通过将webkitTransitionDuration调整为0（并将webkitTransition设置为'none'或{取消转换硬件渲染层，则Android 4上的转换实施似乎有问题{1}}经常暗示这一点）。这可以通过使用''或类似的转换持续时间来规避，但这很可能仍会绘制多个帧。

至少在某些设备上更实际的解决方法是使用.001ms的负值，强制新的转换生效，但选择此值以使转换直接在其完成状态下启动

像这样：

webkitTransitionDelay

Answer 2

以下是我通过一些实验发现的内容：

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

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

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

Answer 3

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

$el.removeClass('THE_ANIMATION').css('opacity', 0.99);
window.setTimeout(function () {
  $el.css('opacity', 1); 
}, 0);

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

3 个答案: