js实现淡出
使用 CSS 过渡实现淡出效果
通过 CSS 的 transition 属性和 opacity 结合 JavaScript 实现平滑淡出效果。
const element = document.getElementById('target');
element.style.transition = 'opacity 1s ease-in-out';
element.style.opacity = '0';
// 淡出完成后移除元素（可选）
element.addEventListener('transitionend', () => {
element.style.display = 'none';
});使用 requestAnimationFrame 手动控制淡出
通过逐帧修改 opacity 实现更灵活的动画控制。
function fadeOut(element, duration) {
let opacity = 1;
const startTime = performance.now();
function update() {
const elapsed = performance.now() - startTime;
opacity = 1 - Math.min(elapsed / duration, 1);
element.style.opacity = opacity;
if (opacity > 0) {
requestAnimationFrame(update);
} else {
element.style.display = 'none';
}
}
update();
}
fadeOut(document.getElementById('target'), 1000); // 1秒淡出使用 CSS 动画（@keyframes）
通过 CSS 动画定义淡出效果，用 JavaScript 触发动画。
CSS 部分
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.fade-out {
animation: fadeOut 1s forwards;
}JavaScript 部分
const element = document.getElementById('target');
element.classList.add('fade-out');
// 动画结束后隐藏元素（可选）
element.addEventListener('animationend', () => {
element.style.display = 'none';
});使用第三方库（如 jQuery）
若项目中已引入 jQuery，可直接使用其 fadeOut() 方法。
$('#target').fadeOut(1000); // 1秒淡出注意事项
- 性能优化：优先使用 CSS 过渡或动画，性能优于 JavaScript 逐帧修改。
- 兼容性：
transitionend和animationend事件需注意浏览器前缀（如webkitTransitionEnd）。 - 交互阻断：淡出期间若需禁用点击，可设置
pointer-events: none。
