如何在鼠标悬停后反转动画

在 Web 开发中，经常需要实现一些动画效果来提升用户的体验。其中一个常见的场景就是鼠标悬停时触发动画，再次移开时反转动画。

如何实现这个功能呢？接下来就来介绍一下。

方案一：使用 CSS3 动画

在现代的浏览器中，我们可以使用 CSS3 中的 transition 或 animation 属性来实现动画效果。通过在鼠标悬停时添加一个 CSS 类名，然后在移开时移除这个类名，就可以实现动画反转的效果。

示例代码如下：

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.3s ease;
}

.box:hover {
  transform: rotate(180deg);
}
</style>

<div class="box"></div>

<script>
var box = document.querySelector('.box');
box.addEventListener('mouseleave', function() {
  box.classList.remove('hover');
});
</script>

在上面的代码中，我们定义了一个包含 transition 属性的 .box 元素，当鼠标悬停时，通过添加 .hover 类名来触发动画。在移开时，通过 JavaScript 移除 .hover 类名来反转动画。

方案二：使用 JavaScript 实现动画

除了使用 CSS3 动画外，我们还可以使用 JavaScript 来实现动画。比如利用 requestAnimationFrame 函数来实现。

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box.animate {
  transition: transform 0.3s ease;
}

.box.rotate {
  transform: rotate(180deg);
}
</style>

<div class="box"></div>

<script>
var box = document.querySelector('.box');
var isHover = false;
var isAnimating = false;

box.addEventListener('mouseenter', function() {
  isHover = true;
  if (!isAnimating) {
    animate();
  }
});

box.addEventListener('mouseleave', function() {
  isHover = false;
});

function animate() {
  var start = new Date().getTime();
  var duration = 300;
  var from = box.classList.contains('rotate') ? 180 : 0;
  var to = box.classList.contains('rotate') ? 0 : 180;

  isAnimating = true;

  var frame = function() {
    var now = new Date().getTime() - start;

    if (now < duration && isHover) {
      var progress = now / duration;
      var angle = from + (to - from) * progress;
      box.style.transform = 'rotate(' + angle + 'deg)';
      requestAnimationFrame(frame);
    } else {
      box.classList.toggle('rotate');
      isAnimating = false;
    }
  };

  requestAnimationFrame(frame);
}
</script>

在上面的代码中，我们定义了一个 .box 元素和三个相关的 CSS 类名。当 mouseenter 事件发生时，通过 requestAnimationFrame 函数来实现动画效果。在 mouseleave 事件发生时，停止动画。

需要注意的是，这种方法的实现比较复杂，但是可以实现更加复杂和灵活的动画效果。

以上就是如何在鼠标悬停后反转动画的方法介绍。无论是使用 CSS3 动画还是 JavaScript 实现动画，都需要注意代码的可读性和性能问题。