1

CSSトランジションとトランスフォームの組み合わせを使用してX軸のみをアニメーション化することは可能ですか?モバイルでハードウェアが高速化されているため、translate3D値を使用したいと考えています。

以下のコードは、左から右へのアニメーションでうまく機能しますが、トランジションが「すべて」に設定されているため、不要なアニメーションが発生するため、他の方法で要素を操作しようとすると問題が発生します。これを「左」に変更するとうまくいくと思いましたが、左の位置をアニメーション化するのではなく、translate3d を使用して x 軸上を移動しているため、transnlate3D では機能しません。

.slide-xy {             -webkit-transition: 0.25s all ease-out; }
.slide-xy {            -webkit-transform: translate3d(0,0,0); }
.active .slide-xy {    -webkit-transform: translate3d(-80%,0,0); }
4

1 に答える 1

0

正しい構文は次のとおりです。

.slide-xy {             -webkit-transition: 0.25s -webkit-transform ease-out; }
.slide-xy {            -webkit-transform: translate3d(0,0,0); }
.active .slide-xy {    -webkit-transform: translate3d(-80%,0,0); }
于 2013-07-21T15:27:10.493 に答える