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

Question

每当我点击它时,我想要div它translate,然后rotate,最后scale.此外,reverse it back当我再次点击时,我想以同样的方式

我有以下代码:

$(() => {
  $('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>

编辑更新以包括反转动画的功能(使代码编辑减少最小)