js实现淡入
使用CSS过渡实现淡入效果
通过添加CSS过渡属性结合JavaScript控制类名的切换，实现平滑的淡入效果。
HTML结构：
<div id="fadeElement" class="hidden">内容区域</div>CSS样式：
.hidden {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.visible {
opacity: 1;
}JavaScript控制：
const element = document.getElementById('fadeElement');
element.classList.remove('hidden');
element.classList.add('visible');使用requestAnimationFrame手动控制
通过JavaScript逐帧修改透明度实现更精细的控制：
function fadeIn(element, duration = 1000) {
let start = null;
element.style.opacity = 0;
element.style.display = 'block';
function step(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const opacity = Math.min(progress / duration, 1);
element.style.opacity = opacity;
if (progress < duration) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
}使用Web Animations API
现代浏览器支持的Web Animations API提供更高效的动画控制：
const element = document.getElementById('fadeElement');
element.animate([
{ opacity: 0 },
{ opacity: 1 }
], {
duration: 1000,
easing: 'ease-in',
fill: 'forwards'
});jQuery实现方案
使用jQuery库的fadeIn方法快速实现：
$('#fadeElement').fadeIn(1000);淡入完成后执行回调
为动画添加完成回调函数：
function fadeInWithCallback(element, duration, callback) {
element.style.transition = `opacity ${duration}ms`;
element.style.opacity = 0;
element.style.display = 'block';
setTimeout(() => {
element.style.opacity = 1;
}, 10);
element.addEventListener('transitionend', () => {
if (callback) callback();
}, { once: true });
}注意事项：
- 确保元素初始状态设置为
display: none或visibility: hidden - 移动端设备可能需要添加
will-change: opacity优化性能 - 考虑添加
transitionend事件监听处理动画完成后的逻辑 - 对于复杂的动画序列，建议使用GSAP等专业动画库
