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