利用CSS变量与JavaScript事件实现鼠标按住与释放时的动画切换

浅宇酱_4790

发布时间：2025-12-12 14:44:13

962人浏览过

来源于php中文网

原创

利用CSS变量与JavaScript事件实现鼠标按住与释放时的动画切换

本文详细介绍了如何结合css动画和javascript事件监听，实现一个元素在鼠标左键按住时播放特定动画并保持最终状态，释放时则播放另一个动画的效果。核心方法是利用javascript的`mousedown`和`mouseup`事件动态更新css自定义属性，从而控制`@keyframes`动画的起始和结束值，实现流畅且响应式的用户交互体验。

在现代Web开发中，为用户提供丰富的交互体验至关重要。其中，根据鼠标的按住和释放状态来触发不同的动画效果是一种常见的需求。虽然CSS本身提供了:active伪类，但它通常只在元素被点击的瞬间有效，无法满足“按住时播放动画并保持，释放时播放另一动画”的复杂场景。本文将深入探讨如何通过结合JavaScript的事件监听和CSS的自定义属性（CSS变量），优雅地实现这一功能。

核心实现原理

实现鼠标按住和释放动画的关键在于：

JavaScript事件监听： 捕捉全局的mousedown（鼠标按下）和mouseup（鼠标释放）事件。
CSS自定义属性（变量）： 定义一个或多个CSS变量，用于控制动画@keyframes的起始或结束值。
JavaScript动态更新CSS变量： 在mousedown事件发生时，通过JavaScript修改CSS变量的值，触发“按住”动画；在mouseup事件发生时，再次修改CSS变量，触发“释放”动画。
animation-fill-mode: forwards： 确保动画播放完成后，元素停留在动画的最后一帧状态，而不是返回初始状态。

这种方法允许我们灵活地控制动画的各个阶段，并且保持了CSS动画的性能优势。

详细步骤与示例代码

我们将创建一个简单的div元素，在鼠标按住时旋转45度并保持，释放时旋转回0度。

立即学习“Java免费学习笔记（深入）”；

1. HTML 结构

首先，定义一个简单的HTML结构，包含一个需要动画的元素。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标按住与释放动画</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animate"></div>
    <script src="script.js"></script>
</body>
</html>

2. CSS 样式与动画定义

在style.css文件中，我们将定义元素的初始样式和两个关键帧动画：mousein（按住时）和mouseout（释放时）。关键之处在于，我们使用CSS变量--mousein来动态控制@keyframes的结束值和起始值。

/* style.css */
body {
  background-color: #1c1c1c;
  display: flex; /* 居中显示 */
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.animate {
  background-color: white;
  position: relative;
  height: 50px;
  width: 59px;
  /* 初始应用mousein动画，持续0.4s，停留在最后一帧 */
  animation-name: mousein;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  /* 初始旋转角度，由JS设置的CSS变量控制 */
  transform: rotate(var(--mousein, 0deg)); /* 提供一个默认值 */
}

/* 鼠标按住时播放的动画 */
@keyframes mousein {
  0% {
    /* 动画起始点，由当前--mousein变量值决定 */
    rotate: var(--mousein);
  }
  100% {
    /* 动画结束点，由JS设置的--mousein变量值决定 */
    rotate: var(--mousein);
  }
}

/* 鼠标释放时播放的动画 */
@keyframes mouseout {
  0% {
    /* 动画起始点，由当前--mousein变量值决定 */
    rotate: var(--mousein);
  }
  100% {
    /* 动画结束点，固定为0度 */
    rotate: 0deg;
  }
}

关键点解析：

animation-fill-mode: forwards;：这个属性确保动画完成后，元素会保持在动画的最后一帧状态。
rotate: var(--mousein);：我们利用CSS变量--mousein来控制旋转角度。JavaScript将负责更新这个变量的值。
@keyframes mousein：当鼠标按下时，我们希望元素旋转到45deg。JavaScript会将--mousein设置为45deg，动画将从当前角度（例如0deg）过渡到45deg。
@keyframes mouseout：当鼠标释放时，我们希望元素旋转回0deg。JavaScript会将--mousein设置为0deg，动画将从当前角度（例如45deg）过渡到0deg。
注意： 原始代码中mousein的0%和100%都使用了var(--mousein)，这会使得动画在变量改变时直接跳到新的变量值，而不是平滑过渡。为了实现平滑过渡，我们需要在JS中切换animation-name或者更精细地控制变量。更直接且符合原意的做法是，mousein动画的目标是45deg，mouseout动画的目标是0deg，而变量用于设定当前的“起始”或“结束”状态。

为了实现平滑过渡，我们调整CSS动画逻辑，让JavaScript在事件触发时切换animation-name。

/* 调整后的 style.css */
body {
  background-color: #1c1c1c;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.animate {
  background-color: white;
  position: relative;
  height: 50px;
  width: 59px;
  /* 初始不应用动画，由JS控制 */
  /* animation-name: mousein; */
  /* animation-duration: 0.4s; */
  animation-fill-mode: forwards;
  /* 初始旋转角度 */
  transform: rotate(0deg); 
}

/* 鼠标按住时播放的动画 */
@keyframes mousein {
  0% {
    rotate: 0deg; /* 从0度开始 */
  }
  100% {
    rotate: 45deg; /* 旋转到45度 */
  }
}

/* 鼠标释放时播放的动画 */
@keyframes mouseout {
  0% {
    rotate: 45deg; /* 从45度开始 */
  }
  100% {
    rotate: 0deg; /* 旋转回0度 */
  }
}

3. JavaScript 逻辑

在script.js文件中，我们将监听mousedown和mouseup事件，并根据事件类型来切换元素的animation-name属性。

// script.js
document.addEventListener('DOMContentLoaded', () => {
  const animateElement = document.querySelector('.animate');

  // 设置初始旋转状态（这里我们不直接使用CSS变量来驱动动画的0%和100%）
  // 而是通过切换animation-name来实现
  // 初始状态为0度，所以mouseout动画的100%是0度
  // mousein动画的0%是0度

  window.addEventListener('mousedown', function() {
    // 鼠标按下时，应用mousein动画
    animateElement.style.animationName = 'mousein';
    animateElement.style.animationDuration = '0.4s';
    animateElement.style.animationFillMode = 'forwards';
  });

  window.addEventListener('mouseup', function() {
    // 鼠标释放时，应用mouseout动画
    animateElement.style.animationName = 'mouseout';
    animateElement.style.animationDuration = '0.4s';
    animateElement.style.animationFillMode = 'forwards';
  });
});

代码解释：

document.addEventListener('DOMContentLoaded', ...)：确保DOM完全加载后再执行脚本。
animateElement.style.animationName = 'mousein';：当鼠标按下时，我们将元素的animation-name设置为mousein，这将触发从当前状态到mousein动画100%状态的过渡。
animateElement.style.animationName = 'mouseout';：当鼠标释放时，将animation-name设置为mouseout，触发从当前状态到mouseout动画100%状态的过渡。
animation-fill-mode: forwards;：确保动画完成后元素停留在最终状态。

优化与注意事项

全局事件监听与性能： 在window上监听mousedown和mouseup事件是有效的，但如果页面上有很多可交互元素，可能需要考虑事件委托或只在特定元素上监听，以避免不必要的计算。对于本例，全局监听是合适的。
动画平滑度： 确保mousein动画的结束状态与mouseout动画的起始状态匹配，反之亦然，这样可以保证动画切换时的平滑过渡。在本例中，mousein结束于45deg，mouseout开始于45deg，实现了平滑衔接。
动画持续时间： animation-duration需要根据实际需求调整，确保动画效果自然。
CSS变量的优势： 虽然本例通过直接切换animation-name实现，但如果动画的复杂性更高，例如需要动态改变动画的多个属性（如颜色、大小、位置等），使用CSS变量来驱动@keyframes内部的多个属性值会更加灵活和强大。例如，可以定义--start-rotate和--end-rotate两个变量，然后@keyframes中引用它们。
用户体验： 考虑用户可能快速点击或拖动的情况。当前的实现能够很好地响应这些操作。
清除动画属性： 在某些复杂场景下，你可能需要在动画结束后清除animation-name属性，以避免不必要的动画重触发。可以通过监听animationend事件来完成。