javascript - 使用 CSS 在单击事件上分别为每个转换属性设置动画

Question

I want that whenever I click on the div, it first translate, then rotate and, finally scale. Further, I want to reverse it back in the same way when I click again

我有以下代码:

$(() => {
  $('div').on('click', () => {
    $('div').toggleClass('clicked');
  });
});

div.normal {
  height: 20px;
  width: 100px;
  background: black;
  transition: 2s all;
}
div.clicked {
  transform: translate(100px, 100px) rotate(45deg) scale(2);
}

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

如您所见，所有的转换都是同时发生的。但是，我希望它们分开发生。我如何实现这一点？

提前致谢!

Answer 1

使用关键帧分解动画。这是您的代码的最少编辑版本:

var $el = $('#to-animate')
var firstClick = true

$el.click(() => {
  $el.toggleClass('clicked')

  if (!firstClick) {
    $el.toggleClass('unclicked')
  }
  
  firstClick = false
})

div.normal {
  height: 20px;
  width: 100px;
  background: black;
}
div.clicked {
  animation: transforms 2s forwards;
}
div.unclicked {
  animation: transforms-2 2s reverse;
}

@keyframes transforms {
  33% {
    transform: translate(100px, 100px);
  }
  66% {
    transform: translate(100px, 100px) rotate(45deg);
  }
  100% {
   transform: translate(100px, 100px) rotate(45deg) scale(2);
  }
}

@keyframes transforms-2 {
  33% {
    transform: translate(100px, 100px);
  }
  66% {
    transform: translate(100px, 100px) rotate(45deg);
  }
  100% {
   transform: translate(100px, 100px) rotate(45deg) scale(2);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="to-animate" class='normal'></div>

Edit 更新为包括反转动画的能力(使代码编辑更少)