Question

我正在尝试使用相同的属性对css转换进行排队。基本上我想在我进行另一次翻译之前将元素转换为某个位置（因此转换持续时间为0）。

这是一个模型，点击移动（框应向右移动100px，然后向前翻译100px）

这不起作用，因为第二次转换会先覆盖？

这是有效的（我需要转换持续时间非零（0.01），否则transitionend不会触发）。

另一个问题是转换端在chrome上发生了两次激发，但我可以解决这个问题，我只是想知道是否有更好的方法来编写它？

如果可能的话，如果没有结束事件或计时器我可以写这个吗？

<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);
  })

Css3转换队列

2 个答案: