本教程详细介绍了如何在不依赖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");
});然而，这种方法通常无法达到预期效果。原因在于：
为了实现这种多步骤的动画效果，我们需要引入更强大的CSS动画机制。
立即学习“前端免费学习笔记（深入）”；
实现颜色闪烁效果的推荐方案是结合CSS的@keyframes动画和原生JavaScript的类操作。
这种方法将动画逻辑完全委托给CSS，利用了浏览器对CSS动画的优化（通常由硬件加速），而JavaScript只负责控制动画的启动和重置，从而实现了高性能和良好的可维护性。
首先，我们需要一个触发动画的按钮和一个将要进行颜色闪烁的目标元素。在本示例中，我们将动画应用于body元素，但你可以将其替换为任何你希望动画的特定元素。
<button class="my-button">点击我</button>
接下来，我们定义目标元素的初始样式、按钮样式，以及核心的@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; /* 动画进行到一半时为蓝色 */
}
}最后，我们使用原生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');
});将以上HTML、CSS和JavaScript代码整合到一个文件中，即可看到效果。
元素颜色闪烁动画
<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>
通过结合CSS的@keyframes动画和原生JavaScript的类切换，我们能够以一种高效、纯粹且易于维护的方式实现复杂的元素动画效果，例如点击按钮后的颜色闪烁。这种方法避免了引入额外的库，充分利用了浏览器对CSS动画的优化能力，是实现高性能Web动画的推荐实践。它不仅解决了传统jQuery transition方法在序列动画上的局限性，也为开发者提供了更灵活、更强大的动画控制手段。
以上就是高效实现点击按钮后的元素颜色闪烁动画：纯CSS与原生JS方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
101
收藏
