模仿jQuery的fadeIn、fadeOut、fadeToggle、fadeTo函数，淡入淡出效果挺不错！
一、背景与问题
在前端开发中，淡入淡出动画是实现用户交互的重要手段。jQuery通过fadeIn、fadeOut、fadeToggle、fadeTo等函数提供了开箱即用的动画效果，但其底层原理涉及CSS过渡、动画队列、事件处理等复杂机制。对于需要在不依赖jQuery库的项目中实现类似效果的场景，理解其原理并自行实现具有重要意义。
本文将深入解析这些动画效果的实现原理，通过原生JavaScript+CSS实现功能相近的动画函数，并结合实际开发场景探讨其适用性与性能优化策略。
二、基本原理
1. CSS过渡机制
CSS过渡（transition）通过transition属性控制元素属性变化时的动画效果，其核心参数包括：
transition-property: 指定需要过渡的属性（如opacity）transition-duration: 动画持续时间（如0.5s）transition-timing-function: 动画节奏（如ease-in-out）transition-delay: 延迟时间
2. 动画实现流程
实现淡入淡出的通用流程：
- 设置元素的
opacity属性 - 触发CSS过渡动画
- 通过requestAnimationFrame实现平滑动画
- 处理动画完成事件
3. 动画队列机制
jQuery的动画队列机制允许多个动画操作按顺序执行，这需要通过requestAnimationFrame结合状态机实现。
三、环境准备
# 创建项目结构
mkdir fade-effect
cd fade-effect
touch index.html
touch style.css
touch script.js<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Fade Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fadeBox" style="width: 200px; height: 200px; background: red;"></div>
<button id="toggleBtn">Toggle</button>
<script src="script.js"></script>
</body>
</html>/* style.css */
#fadeBox {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}四、核心实现
1. 基础动画函数
// script.js
function createFadeAnimation(duration = 500, easing = 'ease-in-out') {
return (target, toOpacity, callback) => {
const fromOpacity = parseFloat(window.getComputedStyle(target).opacity);
const opacityDiff = toOpacity - fromOpacity;
// 设置CSS过渡属性
target.style.transition = `opacity ${duration}ms ${easing}`;
// 动画帧循环
let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// 计算当前opacity值
const currentOpacity = fromOpacity + opacityDiff * progress;
target.style.opacity = currentOpacity;
// 动画完成判断
if (progress < 1) {
requestAnimationFrame(animate);
} else {
if (callback) callback();
}
}
requestAnimationFrame(animate);
};
}
// 封装常用方法
const fadeIn = createFadeAnimation(500, 'ease-in-out');
const fadeOut = createFadeAnimation(500, 'ease-in-out');
const fadeToggle = (target, callback) => {
const currentOpacity = parseFloat(window.getComputedStyle(target).opacity);
const targetOpacity = currentOpacity === 0 ? 1 : 0;
fadeIn(target, targetOpacity, callback);
};2. 动画控制函数
function fadeTo(target, opacity, duration = 500, easing = 'ease-in-out', callback) {
const fromOpacity = parseFloat(window.getComputedStyle(target).opacity);
const opacityDiff = opacity - fromOpacity;
target.style.transition = `opacity ${duration}ms ${easing}`;
let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentOpacity = fromOpacity + opacityDiff * progress;
target.style.opacity = currentOpacity;
if (progress < 1) {
requestAnimationFrame(animate);
} else {
if (callback) callback();
}
}
requestAnimationFrame(animate);
}3. 动画队列实现
class AnimationQueue {
constructor() {
this.queue = [];
this.current = null;
}
add(animation) {
this.queue.push(animation);
this.processQueue();
}
processQueue() {
if (this.current || this.queue.length === 0) return;
this.current = this.queue.shift();
this.current();
}
clear() {
this.queue = [];
this.current = null;
}
}五、完整案例
1. 交互式动画案例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Fade Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fadeBox" style="width: 200px; height: 200px; background: red;"></div>
<button id="toggleBtn">Toggle</button>
<button id="fadeToBtn">Fade to 0.5</button>
<button id="fadeTo1Btn">Fade to 1</button>
<script src="script.js"></script>
</body>
</html>// script.js
const fadeBox = document.getElementById('fadeBox');
const toggleBtn = document.getElementById('toggleBtn');
const fadeToBtn = document.getElementById('fadeToBtn');
const fadeTo1Btn = document.getElementById('fadeTo1Btn');
// 初始化动画队列
const animationQueue = new AnimationQueue();
// 动画函数
function fadeIn(target, duration = 500, easing = 'ease-in-out') {
const fromOpacity = parseFloat(window.getComputedStyle(target).opacity);
const targetOpacity = 1;
const opacityDiff = targetOpacity - fromOpacity;
target.style.transition = `opacity ${duration}ms ${easing}`;
let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentOpacity = fromOpacity + opacityDiff * progress;
target.style.opacity = currentOpacity;
if (progress < 1) {
requestAnimationFrame(animate);
} else {
if (callback) callback();
}
}
requestAnimationFrame(animate);
}
function fadeOut(target, duration = 500, easing = 'ease-in-out') {
const fromOpacity = parseFloat(window.getComputedStyle(target).opacity);
const targetOpacity = 0;
const opacityDiff = targetOpacity - fromOpacity;
target.style.transition = `opacity ${duration}ms ${easing}`;
let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentOpacity = fromOpacity + opacityDiff * progress;
target.style.opacity = currentOpacity;
if (progress < 1) {
requestAnimationFrame(animate);
} else {
if (callback) callback();
}
}
requestAnimationFrame(animate);
}
function fadeTo(target, opacity, duration = 500, easing = 'ease-in-out', callback) {
const fromOpacity = parseFloat(window.getComputedStyle(target).opacity);
const opacityDiff = opacity - fromOpacity;
target.style.transition = `opacity ${duration}ms ${easing}`;
let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentOpacity = fromOpacity + opacityDiff * progress;
target.style.opacity = currentOpacity;
if (progress < 1) {
requestAnimationFrame(animate);
} else {
if (callback) callback();
}
}
requestAnimationFrame(animate);
}
// 事件绑定
toggleBtn.addEventListener('click', () => {
const currentOpacity = parseFloat(window.getComputedStyle(fadeBox).opacity);
const targetOpacity = currentOpacity === 0 ? 1 : 0;
animationQueue.add(() => fadeIn(fadeBox, 500, 'ease-in-out'));
});
fadeToBtn.addEventListener('click', () => {
animationQueue.add(() => fadeTo(fadeBox, 0.5, 500, 'ease-in-out'));
});
fadeTo1Btn.addEventListener('click', () => {
animationQueue.add(() => fadeTo(fadeBox, 1, 500, 'ease-in-out'));
});六、源码解析
1. 动画函数核心逻辑
function createFadeAnimation(duration = 500, easing = 'ease-in-out') {
return (target, toOpacity, callback) => {
const fromOpacity = parseFloat(window.getComputedStyle(target).opacity);
const opacityDiff = toOpacity - fromOpacity;
target.style.transition = `opacity ${duration}ms ${easing}`;
let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentOpacity = fromOpacity + opacityDiff * progress;
target.style.opacity = currentOpacity;
if (progress < 1) {
requestAnimationFrame(animate);
} else {
if (callback) callback();
}
}
requestAnimationFrame(animate);
};
}fromOpacity获取当前元素的opacity值opacityDiff计算需要改变的值- 通过requestAnimationFrame实现平滑动画
- 使用CSS过渡属性控制动画效果
- 动画完成时调用回调函数
2. 动画队列实现
class AnimationQueue {
constructor() {
this.queue = [];
this.current = null;
}
add(animation) {
this.queue.push(animation);
this.processQueue();
}
processQueue() {
if (this.current || this.queue.length === 0) return;
this.current = this.queue.shift();
this.current();
}
clear() {
this.queue = [];
this.current = null;
}
}- 队列机制确保动画按顺序执行
processQueue方法处理队列中的动画- 可通过
clear()方法清空队列
七、进阶使用
1. 动画暂停与恢复
function pauseAnimation(target) {
target.style.transition = 'none';
}
function resumeAnimation(target, duration = 500, easing = 'ease-in-out') {
const fromOpacity = parseFloat(window.getComputedStyle(target).opacity);
target.style.transition = `opacity ${duration}ms ${easing}`;
requestAnimationFrame(() => {
target.style.opacity = fromOpacity;
});
}2. 动画进度控制
function getAnimationProgress(target) {
const fromOpacity = parseFloat(window.getComputedStyle(target).opacity);
const currentOpacity = parseFloat(target.style.opacity);
return (currentOpacity - fromOpacity) / (1 - fromOpacity);
}3. 多属性动画
function animateMultiple(target, styles, duration = 500, easing = 'ease-in-out') {
const fromStyles = getComputedStyle(target);
const styleDiff = {};
for (const key in styles) {
styleDiff[key] = parseFloat(styles[key]) - parseFloat(fromStyles[key]);
}
target.style.transition = `all ${duration}ms ${easing}`;
let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
for (const key in styleDiff) {
const value = parseFloat(fromStyles[key]) + styleDiff[key] * progress;
target.style[key] = value;
}
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}八、性能与工程实践
1. 性能优化策略
| 优化点 | 解决方案 |
|---|---|
| 频繁重绘 | 使用will-change: opacity属性 |
| 动画卡顿 | 使用requestAnimationFrame替代setInterval |
| 内存泄漏 | 动画完成后清除事件监听器 |
| 预处理 | 在动画开始前移除不必要的样式 |
2. 安全风险
- XSS攻击：确保用户输入经过严格过滤
- CSS注入：避免动态设置CSS属性时未校验内容
- 动画劫持：通过
transition属性覆盖可能导致的意外行为
3. 方案比较
| 方案 | 优点 | 缺点 |
|---|---|---|
| 原生JS | 无依赖 | 需要处理更多细节 |
| jQuery | 简单易用 | 体积较大 |
| CSS动画 | 无需JS | 动画控制不灵活 |
九、常见问题与踩坑
1. 常见错误
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 动画不生效 | 未设置初始opacity | 确保元素初始opacity为0或1 |
| 动画卡顿 | 动画持续时间过长 | 适当缩短动画时间 |
| 动画叠加 | 未处理动画队列 | 使用动画队列机制 |
| 回调未执行 | 动画未完成 | 确保动画完全执行后调用回调 |
2. 踩坑案例
// 错误示例
function fadeOut(element) {
element.style.opacity = 0;
}问题：直接设置opacity值会跳过CSS过渡效果
// 正确实现
function fadeOut(element, duration = 500) {
const fromOpacity = parseFloat(window.getComputedStyle(element).opacity);
element.style.transition = `opacity ${duration}ms ease-in-out`;
element.style.opacity = 0;
}十、最佳实践
- 使用CSS过渡：利用CSS过渡实现动画，保持代码简洁
- 动画队列：通过队列机制确保动画按顺序执行
- 性能优化：使用
will-change属性提升性能 - 错误处理：添加动画完成回调，处理异常情况
- 可维护性：将动画逻辑封装成独立函数，提高复用性
- 安全防护：对用户输入进行严格校验，避免XSS攻击
十一、总结
通过深入分析jQuery动画函数的实现原理，我们实现了基于原生JavaScript的淡入淡出动画效果。本文详细讲解了CSS过渡机制、动画队列实现、性能优化策略等关键技术点，并通过完整案例展示了在实际开发中的应用。
在实际项目中，这种动画效果适用于：
- 用户提示信息的渐显渐隐
- 状态切换的视觉反馈
- 图片或内容的动态加载
- 模态框的显示隐藏
但需要注意避免在以下场景使用：
- 需要精确控制动画进度的场景
- 需要同时控制多个属性的复杂动画
- 对性能要求极高的移动端应用
通过合理使用这些动画效果，可以显著提升用户体验，但必须权衡其带来的性能影响，合理选择实现方案。