javascript - 新しい位置からの角度のCSS3遷移

Question

いくつかの遷移中に要素の最後の位置から開始して角度を遷移させる方法はありますか？

div2 {
  transform: translateX(90px);
  transform: translateY(90px);
  transform: translate(110px,110px);
}

例

基本的に私がやりたいのは、divを「トランジション2」状態の上から110ピクセル、左から110ピクセル移動させることです。

jQuery.Transitプラグインを使用しています。

Answer 1

あなたはこれを行うことができます：

var x = 0; // horizontal base value
var y = 0; // vertical base value

//Transition 1
$('#div2').transition({ x: x = x + 90 });
//Transition 2
$('#div2').transition({ y: y = y + 90 });
//Transition 3
$('#div2').transition({ x: x = x + 110, y: y = y + 110 });

このようにして、各段階で基本値を増やします

編集

次に例を示します：http：//jsfiddle.net/5AuhV/1/

Answer 2

jQueryの組み込みのインクリメント構文を使用できます。

//Transition 1
$('#div2').transition({ x: "+=" + 90 });
//Transition 2
$('#div2').transition({ y: "+=" + 90 });
//Transition 3
$('#div2').transition({ x: "+=" + 110, y: "+=" + 110 });

Answer 3

たぶん、CSS3のtransition-delayプロパティを試してみるべきでしょう。これが複数のトランジションで機能するかどうかはわかりませんが、試してみてください。

http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

http://www.w3.org/TR/css3-transitions/#transition-delay-property