更改 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

考虑在活动类上有一个不同的转换，在向 left 属性添加延迟

$('.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>

Answer 2

只需在类不活动时向左添加延迟，并在类处于活动状态时添加相反的配置：

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

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

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