滚动进度需通过JS检测并切换CSS类名来触发transition，不能直接绑定scrollY；必须显式定义初始状态、避免内联样式覆盖、合理节流并处理渲染时机问题。
滚动进度如何映射到 CSS transition 的触发点
CSS 本身不能直接读取滚动位置，transition 也不会因为 scrollY 变化自动启动。必须靠 JS 检测滚动进度、修改元素类名（比如加 active），再让 CSS 对这个类名定义过渡规则——这是唯一可靠路径。
常见错误是试图用 transform: translateY() 或 opacity 直接绑定 window.scrollY 做“实时插值”，结果卡顿、跳变、或过渡根本没生效。原因：浏览器不会对频繁变化的内联样式做 transition，且 scroll 事件触发太密，JS 计算+重排压力大。
- 只在关键节点（如进入视口 20%、50%、80%）才调用
element.classList.add()或.toggle() - 避免在
scroll回调里直接写element.style.opacity = ...—— 这会绕过 CSS transition - 用
requestAnimationFrame节流，但别过度：每帧只做一次状态判断，不重复计算百分比
transition 触发类名该怎么写才稳定
类名本身不重要，关键是它对应的 CSS 必须满足两个条件：一是有可过渡的属性声明，二是该声明不能被其他样式覆盖或重置。很多人写了 .fade-in { opacity: 1; transition: opacity 0.3s; }，却忘了初始状态没定义 opacity，导致第一次加类时没有过渡效果。
- 初始状态必须显式声明，比如
.box { opacity: 0; }，否则 transition 不会从“无”到“有”起效 - 避免用
!important或高权重选择器覆盖过渡类，否则 transition 属性可能被忽略 - 如果同时控制多个属性（如
transform和opacity），统一写在一条transition里：transition: opacity 0.3s, transform 0.3s;，不要拆成两条 - 慎用
transition: all—— 它会让所有可动画属性都响应，包括你没想动的height或margin，容易引发意外布局抖动
滚动监听 + 类名切换的最小可行代码结构
核心就三步：获取目标元素位置、计算当前滚动占比、到达阈值时更新类名。不需要框架，原生 API 足够轻量。
立即学习“前端免费学习笔记（深入）”；
示例：当元素顶部距视口顶部 ≤ 75% 高度时，添加 in-view 类
const target = document.querySelector('.js-scroll-trigger');
const threshold = window.innerHeight * 0.75;
<p>function handleScroll() {
const top = target.getBoundingClientRect().top;
if (top <= threshold) {
target.classList.add('in-view');
} else {
target.classList.remove('in-view');
}
}</p><p>window.addEventListener('scroll', handleScroll);
handleScroll(); // 初始化检查一次
-
getBoundingClientRect()比offsetTop更可靠，不受父容器transform影响 - 首次加载要手动调用一次
handleScroll()，否则首屏已可见的元素不会触发 - 如果页面有动态内容（如图片懒加载后高度变化），需在内容加载完后重新计算
threshold或调用handleScroll()
为什么有时 transition 看起来“没动”或“闪一下”
不是 JS 没执行，也不是 CSS 写错了，大概率是浏览器渲染流水线里的时机问题：类名加了，但样式还没来得及计算，或者刚加完立刻又被移除。
- 滚动太快时，
in-view类可能刚加上又因top > threshold被立刻移除，人眼看不到过渡过程 —— 加个防抖或“保持窗口”逻辑（比如离开阈值后延迟 100ms 再移除） - CSS 中用了
will-change: transform却没配对应transform值，会导致过渡失效或闪烁 - 父容器设置了
overflow: hidden且子元素有transform动画，某些 Safari 版本会截断动画帧 —— 改用clip-path或确保父容器有transform: translateZ(0) - 使用
prefers-reduced-motion的用户，系统会禁用 transition —— 如果业务强依赖动效，得单独处理降级逻辑
最常被忽略的是：过渡属性和初始/终态值必须类型一致、单位可插值。比如从 opacity: 0 到 opacity: 1 没问题，但从 display: none 到 display: block 就永远无法过渡 —— 这种地方只能换思路，用 visibility + opacity 组合。
