如何修改CSS Transition顺序，实现第二次点击元素先缩放在左移？

你现在的问题是元素第二次点击（移除active类）时，过渡顺序和正向不一致，想要先缩小再左移对吧？这是因为你只给默认的.box设置了过渡规则，移除类的时候会沿用同样的延迟顺序，所以才会先执行left的移动。

解决方法很简单，只需要给.box.active也单独设置过渡规则，让它的transform没有延迟，left延迟1秒，这样反向切换的时候，过渡顺序就反过来了：

$('.box').click(function(){ 
  $('.box').toggleClass('active'); 
});

.box {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  /* 正向：先移动left，2秒后执行transform */
  transition: left 1s, transform 1s 2s;
  border: 1px solid;
}

.box.active {
  left: 100px;
  transform: scale(2);
  /* 反向：先执行transform（无延迟），1秒后执行left */
  transition: transform 1s, left 1s 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

原理说明： #

• 当添加active类时，使用.box的过渡规则：left先动（1秒完成），transform延迟2秒开始，所以先右移再放大。
• 当移除active类时，此时元素处于.box.active的状态，会使用它的过渡规则：transform立即开始（1秒完成缩小），left延迟1秒开始移动，这样就实现了先缩小再左移的效果。

这样调整后，两次点击的过渡顺序就完全反向了，符合你的需求~

内容的提问来源于stack exchange，提问作者Ayush Gupta