2

オブジェクトを取得し、事前に設定されたトランジションにアニメーション化することなく、rotateY プロパティを変換する簡単な方法を探しています。これは、このスライド ショーを完成させるのに役立ちます(Chrome または Safari (WebKIT) でのみ表示)

効果の内訳の例を次に示します。

CSS - 遷移は 5 秒に設定されています

フェーズ1

Element1 - 回転 Y:0;

Element2 - 回転 Y:-180;

ユーザー- ボタンのクリック

フェーズ2

Element1 - 回転 Y:180;

Element2 - 回転 Y:0;

Phase3

Element1 - 回転 Y:-180;

Element2 - 回転 Y:0;

ユーザー- ボタンのクリック

Phase4

Element1 - 回転 Y:0;

Element2 - 回転 Y:180;

最初のトランジション (フェーズ 1 & 2) が完了した後、フェーズ 1 でElement2があった位置になるように、Element1 のrotateY値をトランジションなしで -180 に設定する必要があります。これにより、私が提供したリンクの例でわかるように、アニメーションによって要素が互いに回転しているように見えます。残念ながら、すべての要素がrotateY:180になると、効果はなくなります。

jsFiddle をやりたいのですが、今はこのプロジェクトに時間がありません。

アニメーション/トランジションなしで、オブジェクトをポイント a からポイント b に移動するだけのソリューションが必要です

すべてが理にかなっていることを願っています

4

2 に答える 2

3

トランジションなしでオブジェクトを回転させようとしている場合は、トランジションをまったく設定しないでください。変換のみを設定します。

$(this).css('-webkit-transform','rotateY(180deg)');

$(this).css('-webkit-transform','rotateY(0)');

回転時にトランジションを表示しないライブの例: http://jsfiddle.net/2XU7D/4/

于 2011-08-02T13:45:02.703 に答える
0

または、1 つのことを実行して、2 つのクラスを作成することもできます。

.enable{ -webkit-transform : rotateY(180deg); -webkit-transition : 10s; }
.disable{ -webkit-transform : rotateY(0deg); -webkit-transition : 0; }

イベントが必要なクラスをチェックします。

于 2011-07-27T19:50:40.677 に答える