答案：通过JavaScript监听滚动事件或使用Intersection Observer API，判断元素进入视口时添加.active类，触发CSS transition实现流畅入场动画。
在网页开发中，将CSS transition 动画与页面滚动事件（scroll）结合使用，可以实现元素随用户滚动行为渐进出现或变化的视觉效果。这种组合常用于视差滚动、懒加载动画、滚动触发动效等场景，提升用户体验和页面表现力。
滚动事件监听与类名控制
通过JavaScript监听窗口的 scroll 事件，判断元素是否进入视口，再动态添加或移除CSS类，从而触发基于 transition 的动画效果。
常见做法是：初始状态下元素处于“隐藏”或“未激活”状态，当用户滚动到该元素附近时，为其添加一个如 .active 的类，该类定义了带有 transition 的样式变化。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.element {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
<p>.element.active {
opacity: 1;
transform: translateY(0);
}</p>JavaScript 部分监听滚动并判断元素位置：
const elements = document.querySelectorAll('.element');
<p>function checkPosition() {
elements.forEach(el => {
const positionFromTop = el.getBoundingClientRect().top;
const windowHeight = window.innerHeight;</p><pre class='brush:php;toolbar:false;'>if (positionFromTop < windowHeight * 0.8) {
el.classList.add('active');
}}); }
window.addEventListener('scroll', checkPosition); checkPosition(); // 页面加载时也检查一次
CSS Transition 的性能优势
使用 transform 和 opacity 配合 transition，浏览器通常能将其提升为合成层（compositing layer），避免重排（reflow）和重绘（repaint），从而实现更流畅的动画效果。
相比直接修改 top、left 或 width 等会触发布局计算的属性，transform 更适合用于滚动动画。
- 优先使用 transform 实现位移、缩放
- 用 opacity 控制透明度变化
- 避免频繁修改影响布局的属性
优化滚动事件性能
scroll 事件在滚动过程中会高频触发，直接在其中执行 DOM 查询和判断会影响性能。建议使用防抖（debounce）或节流（throttle）来优化。
也可以使用 Intersection Observer API 替代 scroll 事件监听，更加高效且语义清晰。
使用 Intersection Observer 的示例：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target); // 动画只触发一次
}
});
}, { threshold: 0.1 });
<p>elements.forEach(el => {
observer.observe(el);
});</p>这种方式无需手动计算位置，浏览器自动管理可见性检测，性能更好，推荐现代项目使用。
实际应用场景
这类技术广泛应用于以下场景：
- 页面内容块滚动进入时淡入上浮
- 导航栏随滚动高度改变背景透明度
- 进度条或计数器在可视时开始动画
- 图片延迟加载配合入场动画
基本上就这些关键点。合理结合 scroll 行为与 CSS transition，能让页面动效自然流畅，又不牺牲性能。关键是控制好触发时机，并选择合适的动画属性。
