0

Android 固有の Web アプリのメニューをアニメーション化するために、いくつかの CSS3 2D 変換を使用しています。

ontouchstart 関数がトリガーされた後にのみ適用されるため、Javascript を使用してアニメーション パラメータを挿入しています。

例として、アニメーションの最初の部分の JavaScript を次に示します。

function d1(){
        var d1=document.getElementById('d1');
        d1.style["-webkit-animation"] = "slide1";
        d1.style["-webkit-animation-duration"] = "3s";
        d1.style["-webkit-animation-iteration-count"] = "1";
        d1.style["-webkit-animation-fill-mode"] = "forwards";
        }

slide1アニメーション用の CSS3 は次のとおりです。

     @-webkit-keyframes slide1 {
       0%{-webkit-transform:translateY(0) scaleY(0);}
       100%{-webkit-transform:translateY(122px) scaleY(1);}
     }

このコードはアニメーションを正しく表示しますが、アニメーションの各状態が完了すると消えます。私が読んだことから、これは-webkit-animation-fill-mode:forwardsorを使用して解決する必要があります-webkit-animation-iteration-count:1が、どちらも再生後にアニメーションを停止/一時停止していないようです。

他の誰かが Android で同様の問題に遭遇しましたか? 助けてください。ありがとう

4

2 に答える 2

3

これをCSSに追加するだけです。Androidは、ネストや省略形を好みません。私はこれを試しましたが、それは私にとってはうまくいきました。これが私のすべてのwebKitアニメーションのやり方です。

@-webkit-keyframes slide1 {
    -webkit-transform: translateY(122px);
    -webkit-transform: scaleY(1);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
}
于 2012-03-15T17:58:57.837 に答える
0

アニメーションが 0% ステージに戻るかどうかを調査しましたか。初期scaleYを0.25などに設定しますか?

また、可能なすべての塗りつぶしモード (なし/前方/後方/両方) をテストして、効果があるかどうかを確認することもできます。

さらに、（パフォーマンスを向上させるためtranslate3d()に）translateX/Y の代わりに使用することをお勧めします。

于 2011-10-26T11:04:01.067 に答える