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

問題の回避策を見つけました。オーバーフローの削除: 非表示; コンテナからアニメーションを停止できました。図に行きます。

編集:これは機能しますが、アニメーションの開始/停止時にスタッターが発生するため、理想的な解決策ではありません。

于 2012-10-25T08:32:31.700 に答える
0

これを確認するソースを見つけるのに苦労していますが、div がonclickタッチ デバイスのイベントを送信していない可能性があります。http://jsfiddle.net/f2XaP/4/で onclick を処理するテストを作成しました<a>が、iPhone で動作するようです。

于 2012-10-24T21:25:25.887 に答える