jquery - 更改 CSS 过渡的顺序

Question

假设我有一个代码:

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

.box {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: left 1s, transform 1s 2s;
  border: 1px solid;
}

.box.active {
  left: 100px;
  transform: scale(2);
}

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

<div class="box"></div>

现在，由于transform属性中的过渡延迟，点击div后，div会先向右移动，然后它的大小会增加。

当我们再次点击div时，它会先向左移动，然后它的尺寸会变小。

我想改变转换的顺序，这样当我们第二次点击 div 时，它先减小尺寸然后向左移动。我该怎么做？

Answer 1

考虑在事件类上添加延迟到左侧属性的不同转换

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

.box {
  position:relative;
  margin:100px;
  background:red;
  Height: 50px;
  Width: 50px;
  transition: 1s left, 1s transform 2s;
  left:0;
}

.box.active {
  left: 100px;
  transform: scale(2);
  transition: 1s left 2s, 1s transform;
}

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