使用 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 已更新以包含反转动画的功能（使代码编辑更少）

Answer 2

一个想法是依靠其他属性来实现相同的效果并能够应用不同的过渡

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

div.normal {
  height: calc(20px * var(--s,1));
  width: calc(100px * var(--s,1));
  background: black;
  position:relative;
  top:0;
  left:0;
  transition: 2s top 4s,2s left 4s,2s width 2s,2s height 2s,2s transform;
}
div.clicked {
  top:100px;
  left:100px;
  --s:2;
  transform:rotate(45deg);
  transition: 2s top,2s left,2s width 2s,2s height 2s,2s transform 4s;
}

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

使用 CSS 在点击事件上分别为每个变换属性设置动画

Animate each transform property separately on click event using CSS

javascript

css

css-transitions

css-transforms

使用 CSS 在点击事件上分别为每个变换 属性 设置动画

Animate each transform property separately on click event using CSS

javascript

css

css-transitions

css-transforms

使用 CSS 在点击事件上分别为每个变换属性设置动画