2

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 にすぎないことに注意してください。translate と position の CSS プロパティ ("top"、"left" など) を使用すると機能します。

4

3 に答える 3

1

Android 4 でのトランジションの実装は、webkitTransitionDurationを 0 に調整することで移行中のハードウェア レンダリング レイヤーがキャンセルされる場合にバグがあるようです (またはに設定webkitTransitionすると、多くの場合、これが暗示されます)。これは、または同様の遷移期間を使用することで回避できますが、これでも複数のフレームが描画される可能性が非常に高くなります。'none'''.001ms

少なくとも特定のデバイスでのより実用的な回避策は、 に負の値を使用してwebkitTransitionDelay、新しいトランジションを強制的に有効にすることですが、トランジションが終了した状態で直接開始されるようにこの値を選択することです。

そのようです：

e.style.webkitTransition = '-webkit-transform linear 10s';
e.style.webkitTransform = 'translate3d(100px,100px,0)';

# now cancel 10s-long transition in 1s and reset transformation
setTimeout(function() {
    e.style.webkitTransitionDelay = '-10s'
    e.style.webkitTransform = 'translate3d(0,0,0)';
}, 1000)
于 2013-05-02T17:37:16.617 に答える
0

いくつかの実験で私が発見したことは次のとおりです。

chrome、safari、firefox、iphone の webview で実行中の translate2d または 3d を停止するには、「none」のトランジションを設定するか、負または 0 の時間遅延でトランジションを設定し、上記のように現在の位置に新しい翻訳を行います。

ただし、これは android webview では機能しません。私がAndroidで見つけた唯一の解決策は、遷移遅延を.001sのような小さな正の数に設定し、現在の位置に変換することでした。

iphone webview では、負のトランジション遅延の解決策は、次のトランジションの先取りを実行する前に、進行中のトランジションの最終位置をフラッシュする「なし」または小さな正の数よりも望ましいことに注意してください。

于 2013-11-12T02:18:01.257 に答える
0

これは私の（非常に似た）問題を解決します：

$el.removeClass('THE_ANIMATION').css('opacity', 0.99);
window.setTimeout(function () {
  $el.css('opacity', 1); 
}, 0);
于 2014-06-09T12:51:39.453 に答える