本教程详细介绍了如何在不依赖jquery ui等第三方库的情况下，仅通过css的`@keyframes`动画和原生javascript的类操作，实现点击按钮后目标元素颜色动态闪烁的效果。我们将探讨传统jquery `transition`方法的局限性，并提供一种更高效、更纯粹的解决方案，确保动画的流畅性和可重复性。
在前端开发中，我们经常需要为用户交互添加视觉反馈，例如点击按钮后元素颜色的闪烁效果。尽管jQuery提供了强大的DOM操作能力，但对于复杂的、时间序列的动画，单纯依赖其css()方法配合CSS transition属性往往会遇到挑战。本教程将深入探讨一种利用CSS @keyframes动画与原生JavaScript进行类切换的优雅方案，实现轻量级且高性能的颜色闪烁效果。
传统方法的局限性
许多开发者在尝试实现类似“元素先变蓝，再变红”的序列动画时，可能会尝试以下jQuery代码：
$(".my-button").click(function() {
$(".other-element").css("transition", "color .3s").css("color", "blue");
$(".other-element").css("transition", "color .6s").css("color", "red");
});然而，这种方法通常无法达到预期效果。原因在于：
- 同步执行： JavaScript代码是同步执行的。当第一行设置颜色为蓝色时，第二行几乎立即执行，将颜色设置为红色。浏览器可能来不及渲染蓝色状态，或者即使渲染了，也会被随后的红色状态迅速覆盖。
- transition的性质： transition属性定义的是元素属性从一个状态平滑过渡到另一个状态所需的时间和方式。它适用于属性的最终值发生变化时，而不是用于创建多步骤、时间序列的复杂动画。它无法管理一个元素在不同时间点经历多个中间状态。
为了实现这种多步骤的动画效果，我们需要引入更强大的CSS动画机制。
立即学习“前端免费学习笔记（深入）”；
核心原理：CSS动画与JavaScript协作
实现颜色闪烁效果的推荐方案是结合CSS的@keyframes动画和原生JavaScript的类操作。
- CSS @keyframes动画： @keyframes规则允许我们定义动画的各个阶段（或“帧”），指定在动画的不同百分比时间点上元素的样式。这使得我们可以精确控制颜色从初始状态到中间状态再回到初始状态的整个过程。
- JavaScript类切换： JavaScript的作用变得非常简单：当按钮被点击时，为目标元素添加一个CSS类（例如.active），这个类会触发预定义的@keyframes动画。动画播放结束后，JavaScript会移除这个类，以便动画可以再次被触发。
这种方法将动画逻辑完全委托给CSS，利用了浏览器对CSS动画的优化（通常由硬件加速），而JavaScript只负责控制动画的启动和重置，从而实现了高性能和良好的可维护性。
实现步骤
1. HTML结构
首先，我们需要一个触发动画的按钮和一个将要进行颜色闪烁的目标元素。在本示例中，我们将动画应用于body元素，但你可以将其替换为任何你希望动画的特定元素。
<button class="my-button">点击我</button>
2. CSS样式与动画定义
接下来，我们定义目标元素的初始样式、按钮样式，以及核心的@keyframes动画。
body {
margin: 0;
background-color: #f00; /* 初始背景色：红色 */
display: flex;
min-height: 100vh; /* 确保body占据整个视口高度 */
justify-content: center; /* 居中按钮 */
align-items: center; /* 居中按钮 */
}
.my-button {
background-color: white;
border: none;
border-radius: 3px;
padding: 10px 20px;
transition: .2s; /* 按钮自身的悬停过渡效果 */
box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
cursor: pointer; /* 提示用户可点击 */
}
.my-button:hover {
background-color: #ddd;
}
/* 动画触发类 */
.active {
animation: bganim .6s ease-in-out; /* 应用名为bganim的动画，持续0.6秒，缓动函数 */
}
/* 关键帧动画定义 */
@keyframes bganim {
0%, 100% {
background-color: #f00; /* 动画开始和结束时为红色 */
}
50% {
background-color: #00f; /* 动画进行到一半时为蓝色 */
}
}- body的初始background-color设置为红色（#f00）。
- .active类是动画的触发器，当它被添加到body上时，bganim动画将开始播放。ease-in-out缓动函数使动画开始和结束时平滑。
- @keyframes bganim定义了动画的三个关键状态：
- 0%：动画开始时，背景色为红色。
- 50%：动画进行到一半时，背景色变为蓝色（#00f）。
- 100%：动画结束时，背景色回到红色。
3. JavaScript逻辑
最后，我们使用原生JavaScript来监听按钮点击事件，并控制active类的添加和移除。
const button = document.querySelector('.my-button');
const targetElement = document.body; // 动画目标元素，这里是body
button.addEventListener('click', function() {
// 检查目标元素是否正在动画，防止重复添加类导致动画中断或不流畅
if (!targetElement.classList.contains('active')) {
targetElement.classList.add('active');
}
});
// 监听动画结束事件，动画结束后移除active类
targetElement.addEventListener('animationend', function() {
targetElement.classList.remove('active');
});- document.querySelector('.my-button') 获取按钮元素。
- document.body 设置动画的目标元素为body。如果你想动画其他元素，只需将其选择器替换为该元素的即可，例如 document.querySelector('.other-element')。
- 当按钮被点击时，targetElement.classList.add('active') 会为body添加.active类，从而触发动画。
- targetElement.addEventListener('animationend', ...) 监听animationend事件。当CSS动画播放完毕后，这个事件会被触发，此时我们移除.active类，使得动画可以被再次触发。
完整示例代码
将以上HTML、CSS和JavaScript代码整合到一个文件中，即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素颜色闪烁动画</title>
<style>
body {
margin: 0;
background-color: #f00; /* 初始背景色：红色 */
display: flex;
min-height: 100vh; /* 确保body占据整个视口高度 */
justify-content: center; /* 居中按钮 */
align-items: center; /* 居中按钮 */
transition: background-color 0.05s; /* 确保在动画结束后移除类时，颜色能瞬间回到基准色，避免视觉闪烁 */
}
.my-button {
background-color: white;
border: none;
border-radius: 3px;
padding: 10px 20px;
transition: .2s; /* 按钮自身的悬停过渡效果 */
box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
cursor: pointer; /* 提示用户可点击 */
font-size: 16px;
}
.my-button:hover {
background-color: #ddd;
}
/* 动画触发类 */
.active {
animation: bganim .6s ease-in-out forwards; /* 应用名为bganim的动画，持续0.6秒，缓动函数 */
/* forwards 确保动画结束后保持最后一帧的状态，但由于我们立即移除类，此处非必需 */
}
/* 关键帧动画定义 */
@keyframes bganim {
0%, 100% {
background-color: #f00; /* 动画开始和结束时为红色 */
}
50% {
background-color: #00f; /* 动画进行到一半时为蓝色 */
}
}
</style>
</head>
<body>
<button class="my-button">点击我</button>
<script>
const button = document.querySelector('.my-button');
const targetElement = document.body; // 动画目标元素，这里是body
button.addEventListener('click', function() {
// 检查目标元素是否正在动画，防止重复添加类导致动画中断或不流畅
// 只有当动画未进行时才添加类，确保动画完整播放
if (!targetElement.classList.contains('active')) {
targetElement.classList.add('active');
}
});
// 监听动画结束事件，动画结束后移除active类
targetElement.addEventListener('animationend', function() {
targetElement.classList.remove('active');
});
</script>
</body>
</html>注意事项与最佳实践
- 动画目标元素： 示例中为了简化，将动画应用到body元素上。在实际项目中，你可以将.active类添加到任何你希望进行颜色闪烁的特定元素上，只需修改JavaScript中的targetElement选择器。
- 动画可重用性： 这种将动画逻辑封装在CSS类中的方法，使得动画本身具有高度可重用性。你可以在不同的JavaScript事件中触发相同的动画效果。
- 性能优势： CSS动画通常由浏览器进行优化，并可能在独立的线程中运行，利用GPU加速，因此在性能上通常优于通过JavaScript频繁操作DOM样式来实现的动画。
- animationend事件： animationend事件是此方案的关键。它确保在动画完全播放完毕后才移除active类，从而允许动画完整重播。如果没有它，每次点击都可能在动画未结束时就重置，导致动画不完整。
- 防止重复触发： 在click事件监听器中添加if (!targetElement.classList.contains('active'))判断，可以避免在动画进行中重复点击按钮导致动画行为异常。
- 浏览器兼容性： 现代浏览器对@keyframes和animationend事件的支持良好。对于旧版浏览器，可能需要添加供应商前缀（如-webkit-），但现在已不常用。
总结
通过结合CSS的@keyframes动画和原生JavaScript的类切换，我们能够以一种高效、纯粹且易于维护的方式实现复杂的元素动画效果，例如点击按钮后的颜色闪烁。这种方法避免了引入额外的库，充分利用了浏览器对CSS动画的优化能力，是实现高性能Web动画的推荐实践。它不仅解决了传统jQuery transition方法在序列动画上的局限性，也为开发者提供了更灵活、更强大的动画控制手段。
