web-dev-qa-db-ja.com

webkittranslateXアニメーションが初期位置にロールバックしています

モバイルWebkit用の画像ギャラリーを作成しようとしています。

実際に十分に高速である唯一の方法は、ハードウェアアクセラレーションされたtranslateXを使用することです。

私の問題は、divがアニメーションの最後に最初の位置を取り戻すことです。左ボタンにslideGalLeftクラスのクリックを追加します。アニメーションのdivに

ここのコールバックイベントセクションで例を見ることができます： http://position-absolute.com/jqtouch/demos/main/#home

    .slideGalLeft {
    -webkit-animation-name: slideColis;
}


@-webkit-keyframes slideColis {
    from { -webkit-transform: translateX(0%); }
    to { -webkit-transform: translateX(-100%); }
}
webkitcss
15
Cedric Dugas

一度再生するとデフォルト値に戻るため、これにWebkitアニメーションを使用しないでください。代わりに定義する

_.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%);
}
_

javascriptを使用して、-webkit-transform: translateX(100%);を設定するか、CSSクラスを要素に追加して、最終的な変換値を設定すると、Webkitがそれを適切にアニメーション化します。

13
Guillaume Esquevin

ギヨームの答えは素晴らしいです。ただし、ハードウェアアクセラレーションを探している場合は、3Dレンダリング（ハードウェアアクセラレーションをアクティブにするもの）が必要であることをWebkitエンジンに通知する必要があります。

http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell によると、これは次のようにルールにtranslateZ（0）を追加することで実行されます。

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%) translateZ(0);
}

それを超えてギヨームのアドバイスに従ってください。

5
Jason T Featheringham

使用する：

-webkit-animation-fill-mode: none/backwards/forwards/both;

これにより、アニメーションの終了時に要素がアニメーションのどの端に残るかを定義できます。

4
hallodom

アニメーションの仕上げに「display：none」スタイルを追加することで、それを機能させることができました。次のCSSを使用します。

.paused {
    -webkit-animation-play-state: paused;
}

.hiddendiv {
    display:none;
}

次に、jQueryコードで：

$('div.sideimage').click(
    function () {
        $(this).removeClass("paused").delay(2000).queue(
            function(next) {     
                $(this).addClass("hiddendiv");     
                next();
            }
        ); 
    }
);

動作するはずです！

2
Jim Yu