從一個新位置的角度CSS3過渡

Question

在幾個過渡期間，是否有方法從元素的最後位置開始進行角度過渡？

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

Example

基本上是我想要做的就是讓從「過渡2」狀態的左側從頂部DIV移動110px和110px。

我正在使用jQuery.Transit插件。

Answer 1

您可以使用jQuery的內置增量語法：

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

Answer 2

你可以這樣做：

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 3

也許你應該嘗試CSS3 transition-delay屬性。我不確定這是否適用於多個轉換，但您應該嘗試。

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

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