Css3转换队列

Question

我想排队css转换具有相同的属性。基本上我想在进行另一次翻译之前将某个元素翻译到某个位置（所以过渡时间为0）。

这是一个样机，点击移动（框应移动100像素右，前左平移100像素）

1. 这并不工作，因为第二过渡覆盖第一？

https://jsfiddle.net/aqwaypoh/3/

这工作（我需要过渡时间非零（0.01）否则transitionend犯规火）。

https://jsfiddle.net/dpv3xzth/5/

还有另外一个问题，即转变结束火灾对铬的2倍，但我可以解决这个问题，我只是想知道是否有更好的方式来写这个？

我宁愿如果我可以写这没有结束事件或计时器如果可能？

<div class="box"></div> 
<a href="#" class="move">move</a></a> 

Answer 1

更新：

您可以使用CSS3 animation属性与@keyframes。

.box.animate { 
    animation: move 2s; 
} 

@keyframes move { 
    0% { 
    transform: translate(100px); 
    } 
    100% { 
    transform: translate(0px); 
    } 
} 

而且使框移动，你可以添加animate类的元素。或者你可以在javascript中自己设置animation属性，这取决于你。

box.addClass('animate') 

的jsfiddle：https://jsfiddle.net/aqwaypoh/7/

Answer 2

添加上第二个条件超时给你想要的东西，我相信。

var box = $('.box'), 
    move = $('.move').click(function() { 
    box.css({ 
     "transform": "translate(100px)", 
     'transition-duration': '0s' 
    }); 

    setTimeout(function(){ 
     box.css({ 
     "transform": "translate(0px)", 
     'transition-duration': '0.5s' 
     }); 
    }, 1); 
    })