2

我在 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 我需要它。

4

3 回答 3

0

This solves my (very similar) problem:

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

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

于 2012-10-24T21:25:25.887 回答
0

我找到了解决该问题的方法。去除溢出：隐藏；从容器允许动画停止。去搞清楚。

编辑：虽然这可行，但动画在开始/停止时会出现口吃，所以这不是理想的解决方案。

于 2012-10-25T08:32:31.700 回答