CSS3過渡隊列

Question

我試圖將具有相同屬性的CSS轉換排入隊列。 基本上，我想在進行另一次轉換之前將元素轉換到特定位置（因此過渡持續時間為0）。

這是一個模型，單擊移動（框應向右移動100px，向左移動100px）

1. 這不起作用，因為第二個過渡首先覆蓋了嗎？

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

2. 這項工作（我需要過渡持續時間非零（0.01），否則transitionend不會觸發）。

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

還有一個問題是過渡端在chrome上觸發2次，但是我可以解決這個問題，我只是想知道是否有更好的方式編寫此代碼？

我希望是否可以在沒有結束事件或計時器的情況下編寫此代碼？

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

Answer 1

更新：

您可以將CSS3 animation屬性與@keyframes一起@keyframes 。

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

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

為了使方框移動，您可以將class 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);
  })