Изменить порядок перехода 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 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>

Answer 2

Рассмотрим другой переход в активном классе, где вы добавляете задержку в левое свойство

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