如何反转延迟动画？

Question

JS小提琴

我有一个正方形，悬停时它向下移动 10px 然后旋转。当离开悬停时，我希望它向后旋转，然后移回 0px。

不幸的是，它不会以相反的顺序执行动画。

所以它应该，在悬停时：

1. 向下移动 10px。
2. 旋转 45 度。

关闭悬停：

1. 旋转回 0 度。
2. 移回0px的原始位置；

代码：

div{
  width: 100px;
  height: 100px;
  background: blue;
  top: 0;
  cursor: pointer;
  position: absolute;
  transition: top 0.3s ease;
  transition: transform 0.3s 0.3s ease;
}

div:hover{
  top: 10px;
  transform: rotate(45deg);
}

<div>

</div>

Answer 1

您的代码有两个小问题，第一个是您设置了transition两次。在这种情况下，第二个将简单地覆盖第一个。简单修复：逗号分隔列表：

transform top 0.3s ease, 0.3s 0.3s ease;

现在，至于反转动画播放的顺序 - 我们要做的是根据我们移动的方向为过渡设置不同的顺序。如果我们处于悬停状态，我们总是希望向前移动，否则反向：

transform top 0.3s ease, 0.3s 0.3s ease;

div{
  width: 100px;
  height: 100px;
  background: blue;
  top: 0;
  cursor: pointer;
  position: absolute;
  transition: transform 0.3s ease, top 0.3s 0.3s ease;
}

div:hover{
  top: 10px;
  transform: rotate(45deg);
  transition: transform 0.3s 0.3s ease, top 0.3s ease;
}