CSS过渡与内联样式_通过JavaScript实时计算过渡数值

内联样式写 transition 无效是因为浏览器未识别状态变化；需分三步：设初始样式+transition、强制重排（如 offsetheight）、再设目标值；动画应使用 requestanimationframe 而非 setinterval。

transition 用内联样式写无效？检查是否触发了重排

直接在 style 上写 transition 没反应，大概率是因为浏览器没机会“看到”属性变化前后的状态差。css 过渡需要两个关键帧：起始值、结束值，且这两个值必须在不同渲染帧中被识别。如果 js 一口气改完 style（比如先设 left 再设 transition），浏览器可能合并成一次重排，过渡就丢了。

• 必须分两步：先设初始样式（含 transition），再强制触发重排，最后设目标值
• 触发重排最稳妥的方式是读一个会触发 layout 的属性，比如 offsetHeight、getBoundingClientRect()
• 别用 setTimeout 模拟“等一帧”，它不保证渲染时机，且在高负载下容易失效

element.style.transition = 'left 0.3s ease'; element.style.left = '0px'; // 初始位置 element.offsetHeight; // 强制重排，让浏览器记住这个状态 element.style.left = '100px'; // 此时才会真正过渡

javaScript 实时计算过渡数值：别用 setInterval 模拟

想手动控制过渡过程（比如根据鼠标位置动态更新 opacity），直接用 setInterval + style 赋值，既卡顿又难对齐真实帧率。浏览器的 requestAnimationFrame 才是唯一能和屏幕刷新同步的机制。

• requestAnimationFrame 回调里读取当前时间戳（performance.now()），结合起始/结束时间算出当前进度比
• 避免用 new date().getTime()，精度低且受系统时间调整影响
• 过渡函数（ease-in-out 等）建议用现成公式或 css-easing 库，别手写三次贝塞尔近似

const start = performance.now(); const duration = 300; function animate(t) {   const elapsed = t - start;   const progress = Math.min(elapsed / duration, 1);   const eased = 1 - Math.pow(1 - progress, 3); // ease-out-cubic   element.style.opacity = String(eased);   if (progress < 1) requestAnimationFrame(animate); } requestAnimationFrame(animate);

transitionend 事件监听不到？注意伪元素和继承属性

transitionend 不会冒泡，也不触发于伪元素（::before）、display 变化、或通过 CSS 继承得来的属性（比如 color 从父级继承）。监听失败，八成是目标属性根本没走 CSS 过渡流程。

• 确保监听的是实际发生变化的 dom 元素，不是父容器
• 检查 computed style，确认 transition-Property 真的包含你要监听的属性名（如 opacity，不是 all）
• transitionend 在 transition 被取消（如 class 移除）时仍会触发，需用 Event.propertyName 做二次校验
• 不要依赖 event.elapsedTime 判断是否完成——它只反映当前 transition 的持续时间，不反映是否真执行完了

内联样式 + transition 性能陷阱：慎用 layout 触发属性

用 top/left 配合 position: relative 做过渡，每次重绘都会触发 layout 计算，滚动或动画密集时掉帧明显。现代浏览器对 transform 和 opacity 有独立合成层优化，应优先用它们。

立即学习“Java免费学习笔记（深入）”；

• 把 left: 100px 换成 transform: translateX(100px)，性能提升通常在 2–5 倍
• transform 和 opacity 是仅有的两个能进 GPU 合成层的 CSS 属性（其他如 Filter 会触发 raster，开销大）
• 如果必须用 top/left，加 will-change: top 提前提示，但别滥用——它会提前创建图层，内存占用上升

过渡数值实时计算本身不难，难的是让每一步都落在浏览器的渲染节奏里。漏掉一次 offsetHeight，或误监听了继承来的 color，整个动画就静音了。