Css3转换队列

Css3 transition queue

本文关键字：队列 转换 Css3      更新时间：2023-09-26

我试图排队css转换相同的属性。基本上，我想在进行另一次转换之前将元素转换到某个位置(因此转换持续时间为0)。

这是一个模型，点击移动(方框应该向右移动100px，然后向左平移100px)

  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>

    更新:

    您可以使用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/

    在第二个条件上添加超时，我相信这是你想要的。

    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);
  })
    相关文章：