难以阻挡的Andr​​oid浏览器的无限CSS动画 [英] Difficult to stop infinite CSS animation in Android browser

问题描述

我有一点运气停止或暂停在Android的浏览器4.x版/ web视图的动画。我已经-webkit-动画迭代计数设为无限的，这是没有问题的Chrome / Safari浏览器停止，但它在Android的失败如果元素具有动画的孩子。

I'm having little luck stopping or pausing an animation in Android 4.x browser / webview. I have -webkit-animation-iteration-count set to infinite and it's no problem stopping it in Chrome/Safari, but it fails in Android if the element has animated children.

我的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');

您可以看到在这个小提琴的问题。如果我取消停止的内容（去除动画类的），那么我可以停止动画。

You can see the problem in this fiddle. If I uncomment the stopping (removal of the animation class) of the content, then I can stop the animation.

我想这可能是一些起泡的问题，我不明白？或者是一个Android的bug？我也曾尝试直接操纵通过JS的风格，而不是还设置webkitAnimationPlayState到暂停而不是改变类，但是这改变不了什么。

I guess it might be some bubbling issue that I fail to understand? Or is it an Android bug? I have also tried directly manipulating the style via JS instead and also setting webkitAnimationPlayState to paused instead of changing class, but that changes nothing.

请注意，小提琴作品Android版Chrome只是不是股票浏览器 - 这是我需要的，因为网页视图的

Note, the fiddle works in Chrome on Android but just not the stock browser - which I need because of the webview.

推荐答案

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

This solves my (very similar) problem:

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

这篇关于难以阻挡的Andr​​oid浏览器的无限CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！