js实现淡出效果
使用 CSS 过渡实现淡出效果
通过 CSS transition 和 opacity 属性结合 JavaScript 触发样式变化，实现平滑的淡出效果。
<div id="fadeElement" style="opacity: 1; transition: opacity 1s ease;">
需要淡出的元素
</div>const element = document.getElementById('fadeElement');
element.style.opacity = '0';
// 可选：淡出完成后移除元素
element.addEventListener('transitionend', () => {
element.style.display = 'none';
});使用 CSS 动画实现淡出
通过定义 @keyframes 动画规则，用 JavaScript 添加动画类名触发效果。
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.fade-out {
animation: fadeOut 1s forwards;
}document.getElementById('fadeElement').classList.add('fade-out');纯 JavaScript 定时器实现
通过 setInterval 动态修改透明度，适合需要精细控制动画过程的场景。
const element = document.getElementById('fadeElement');
let opacity = 1;
const timer = setInterval(() => {
opacity -= 0.05;
element.style.opacity = opacity;
if (opacity <= 0) {
clearInterval(timer);
element.style.display = 'none';
}
}, 50);使用 Web Animation API
现代浏览器支持的动画 API，提供更强大的控制能力。
const element = document.getElementById('fadeElement');
element.animate(
[{ opacity: 1 }, { opacity: 0 }],
{ duration: 1000, fill: 'forwards' }
);
// 动画结束后执行操作
element.getAnimations()[0].finished.then(() => {
element.style.display = 'none';
});jQuery 实现方案
如果项目已使用 jQuery，可用其内置的淡出方法。
$('#fadeElement').fadeOut(1000, function() {
$(this).hide(); // 回调函数
});注意事项
- 移动端考虑添加
will-change: opacity提升性能 - 淡出后如需保留文档流空间，使用
visibility: hidden而非display: none - 较复杂场景建议使用 GSAP 等专业动画库
- 所有方案都应考虑添加
prefers-reduced-motion媒体查询尊重用户偏好
性能优化建议
- 尽量使用 CSS 硬件加速（添加
transform: translateZ(0)） - 避免在大量元素上同时运行动画
- 使用
requestAnimationFrame替代setTimeout/setInterval - 动画结束后及时清理事件监听器
