通过javaScript监听滚动事件并结合css transition，可实现元素随滚动平滑动画的效果。首先为元素设置transition属性，如opacity和transform的过渡效果；再通过scroll事件或Intersection Observer API检测滚动位置，动态添加类名触发样式变化。例如当元素进入视口时添加visible类，使其从透明渐显或移位，从而实现淡入、视差或导航栏渐变等效果。为提升性能，应避免频繁dom操作，推荐使用节流、缓存元素位置，并优先采用GPU加速的transform和opacity属性。同时，注意transition仅适用于可动画属性，且需确保正反向动画均生效。现代方案建议用Intersection Observer替代传统scroll事件，以更高效地监听元素可见性，实现流畅滚动动画。
在 CSS 中，transition 本身是用于控制属性在一段时间内平滑变化的机制，它不能直接“配合”滚动事件，因为滚动（如页面滚动或元素滚动）不会自动触发动画。但你可以通过 javascript 监听滚动事件，动态改变元素的 CSS 类或内联样式，从而触发设置了 transition 的属性发生变化，实现滚动时的平滑动画效果。
1. 基本原理：transition + 滚动监听
给元素设置 transition 属性，让它在某些 CSS 属性（如 opacity、transform、height 等）变化时产生过渡动画。然后使用 JavaScript 监听 scroll 事件，根据滚动位置添加或移除类名，从而触发这些属性的变化。
示例：
.element { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } <p>.element.visible { opacity: 1; transform: translateY(0); }</p>
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('scroll', () => { const elem = document.querySelector('.element'); const rect = elem.getBoundingClientRect(); <p>// 当元素进入视口时 if (rect.top < window.innerHeight * 0.8) { elem.classlist.add('visible'); } });</p>
这段代码的意思是：当元素距离视口顶部小于 80% 视窗高度时，给它加上 visible 类，由于该类改变了 opacity 和 transform，并且原元素设置了 transition，因此会平滑过渡显示出来。
2. 常见应用场景
- 滚动出现动画（fade in）：标题、图片等元素随滚动逐渐显现。
- 视差效果：利用 transform 和 transition 配合滚动位置做轻微位移。
- 导航栏透明度变化：页面下滚时导航栏从透明变实心背景。
例如导航栏渐显：
.navbar { background-color: rgba(0, 0, 0, 0); transition: background-color 0.4s ease; } <p>.navbar.scrolled { background-color: rgba(0, 0, 0, 0.9); }</p>
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('scroll', () => { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } });
3. 性能优化建议
scroll 事件触发非常频繁，直接在里面操作 DOM 或读取布局可能造成性能问题。推荐以下做法：
- 使用 throttle（节流） 控制回调频率，比如每 100ms 最多执行一次。
- 避免在 scroll 回调中频繁读取 getBoundingClientRect 或 offsetTop，可提前缓存位置。
- 优先使用 transform 和 opacity 做 transition，它们由 GPU 加速，性能更好。
4. 注意事项
- transition 只对可动画的 CSS 属性起作用，比如 width、color、transform，但不能用于 display 或 z-index 的直接变化。
- 如果希望“回滚时也动画”，确保移除类时目标属性也能平滑恢复，即反向 transition 也生效。
- 考虑使用 Intersection Observer API 替代 scroll 事件来检测元素是否可见，性能更优。
用 Intersection Observer 实现“滚动出现”的现代写法：
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.1 }); <p>document.querySelectorAll('.element').forEach(el => { observer.observe(el); });</p>
基本上就这些。transition 提供视觉过渡，JavaScript（通过 scroll 或观察器）提供触发时机，两者结合就能做出流畅的滚动动画效果。不复杂但容易忽略细节。