Question

我在Android 4.x浏览器/ webview中停止或暂停动画的运气很少。我将-webkit-animation-iteration-count设置为无限，并且在Chrome / Safari中停止它没有问题，但如果该元素具有动画的子项，则在Android中失败。

我的HTML：

<div id="css-container" onclick="stopAnim();">
    <div id="content">Content</div>
</div>

我的JS：

function stopAnim() {
    // cssContent.classList.toggle('css-container-anim');
    cssContainer.classList.toggle('css-container-anim');
}

var cssContainer = document.getElementById("css-container");
var cssContent= document.getElementById("content");

cssContainer.classList.toggle('css-container-anim');
cssContent.classList.toggle('css-container-anim');

您可以在此fiddle中看到问题。如果我取消注释内容的停止（删除动画类），那么我可以停止动画。

我想这可能是一些我无法理解的冒泡问题？还是Android漏洞？我也尝试过通过JS直接操作样式，并将webkitAnimationPlayState设置为暂停而不是更改类，但是没有任何改变。

请注意，这款小提琴适用于Android上的Chrome浏览器，但不适用于股票浏览器 - 因为webview，我需要这样做。

Answer 1

我无法找到任何来源来确认这一点，但我相信div可能不会为触摸设备发送onclick事件。我在http://jsfiddle.net/f2XaP/4/创建了一个测试，我处理<a>的onclick，它似乎可以在我的iPhone上运行。

Answer 2

我找到了问题的解决方法。删除溢出：隐藏;从容器允许动画停止。去图。

编辑：虽然这有效，但动画会在启动/停止时遇到断断续续的情况，因此它不是理想的解决方案。

Answer 3

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

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

难以在Android浏览器中停止无限的CSS动画

3 个答案: