如何通过HTML制作组合式过渡效果-html教程-PHP中文网

组合式过渡效果需严格按属性分组书写transition，仅transform和opacity真正安全；js切换状态前须强制重排，transitionend需按propertyname过滤。

如何通过html制作组合式过渡效果

组合式过渡效果不是靠堆属性就能成的，关键在于明确哪些属性能一起动、怎么动才不卡、以及 JS 和 CSS 怎么分工。直接写 transition: all 0.3s 很可能让 margin、padding、font-size 全都跟着晃，反而破坏体验。

浏览器把 transition 值按逗号切开，每组必须包含「属性名 + 时间 + 缓动函数」，缺一不可。漏掉缓动会 fallback 到 ease，但漏掉时间整组就失效。

transition: opacity 0.25s linear, transform 0.3s ease-out; ✅ 两组完整，各自独立生效
transition: opacity 0.25s, transform 0.3s; ⚠️ 缺缓动，opacity 组用 ease，transform 组也 fallback，但至少动了
transition: opacity, transform 0.3s; ❌ opacity 没时间，等于没过渡；transform 那组虽有时间，但整行解析已出偏差
别混用简写和单独属性：transition: opacity 0.2s; 和 transition-duration: 0.4s; 同时存在时，后者会覆盖前者的时间

这两个属性是唯二能稳定触发 GPU 加速、不触发重排（reflow）的 CSS 属性。其他看似能动的，比如 background-color 或 box-shadow，在深色模式切换、低端设备或缩放页面时容易掉帧或跳变。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

height/width：auto 值不可插值，height: 0 → height: auto 直接跳变；改用 transform: scaleY(0) → scaleY(1)
margin/padding：虽可动画，但会间接影响布局流，滚动中易抖动；优先用 transform: translateY() 替代 margin-top
display：完全不可动画，display: none ↔ block 切换必闪；改用 visibility: hidden + opacity + transform
iOS Safari 上加 will-change: transform; 和 backface-visibility: hidden; 可防闪烁

在单页应用或步骤条这类需要“先退后进”的场景里，el.classList.remove('active'); el.classList.add('next'); 看似合理，但浏览器会合并 DOM 更新，导致起始帧丢失，动画一闪而过甚至不播。

修复方式：在 class 切换之间插入一次同步布局读取，例如 void el.offsetHeight; 或 el.getBoundingClientRect();
完整顺序：current.classList.remove('active'); void current.offsetHeight; next.classList.add('active');
如果元素是动态渲染（如 API 返回后 append()），确保它已挂载到 DOM 再执行上述逻辑，否则 offsetHeight 返回 0，重排无效
多个属性同时过渡时，transitionend 会触发多次，必须过滤：if (e.propertyName === 'transform') 或 if (e.propertyName === 'opacity')

一个元素同时过渡 transform 和 opacity，浏览器会分别触发两次 transitionend。不加判断就执行状态清理，大概率只处理了一半，下一次动画就错位。

必须绑定在目标元素本身（transitionend 不冒泡）
别依赖 setTimeout 等固定延时——GPU 就绪延迟、页面缩放、系统负载都会影响实际完成时间
如果用 { once: true }，确保只监听你真正关心的那个属性，比如退出动画收尾只等 transform 结束，别被 opacity 提前打断
SPA 中新旧内容切换时，旧元素退出动画结束回调里再插入新元素，并立刻读一次新元素的 scrollHeight 或 offsetHeight，再加 entering 类，否则新动画根本启不来