javascript - Css3 过渡队列

Question

我正在尝试对具有相同属性的 css 转换进行排队。基本上我想在我进行另一个翻译之前将一个元素翻译到某个位置(因此过渡持续时间为 0)。

这是一个模型，点击移动(盒子应该向右移动 100 像素，然后向左移动 100 像素)

1. 这不起作用，因为第二个转换首先覆盖？

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

1. 这行得通(我需要非零 (0.01) 的过渡持续时间，否则 transitionend 不会触发)。

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

还有一个问题是 transition end 在 chrome 上触发了 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);
  }
}

要使方 block 移动，您可以将 animate 类添加到您的元素中。或者你可以在 javascript 中自己设置 animation 属性，这取决于你。

box.addClass('animate')

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