Question

有没有办法在几个过渡期间从元素的最后位置开始进行角度转换？

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

Example

基本上我想做的是让div从顶部移动110px，从'Transition 2'状态左移110px。

我正在使用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

CSS3从新位置过渡到角度

3 个答案: