transition 必须写在元素默认状态中而非仅:hover里，否则移出时动画失效；应只过渡transform和opacity，避免display、height:auto等不可动画属性，并注意transitionend事件需过滤propertyname。
transition 写在基础样式里，别只塞:hover里
鼠标移上去有动画、一挪开就“啪”一下跳回——这不是浏览器问题，是 transition 没写对位置。它必须声明在元素的默认状态中（比如 .card 或 button），而不是仅放在 :hover 里。
常见错误：.btn:hover { transition: opacity 0.3s; } —— 移出时规则失效，动画直接丢弃
正确写法：.btn { transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }，再配 .btn:hover { opacity: 0.7; }
多个属性要过渡？分开写更可控：transition: transform 0.25s, opacity 0.3s;，避免用 all 引入意外变化
只过渡 transform 和 opacity，别碰 display 或 height: auto
transform（位移/缩放/旋转）和 opacity 是唯二能稳定触发 GPU 加速的 CSS 属性。其他如 background-color 在深色模式或低端设备上易卡顿；width/height 会强制重排（reflow），帧率不稳还难预测。
特别注意：display: none 和 height: auto 完全不可动画——写了也不动，还会干扰渲染流。下拉菜单这类场景，改用 max-height 配合 overflow: hidden，且必须设具体数值（比如 max-height: 500px），不能留 auto。
iOS Safari 上记得加这两句防闪烁：will-change: transform; 和 backface-visibility: hidden;
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
监听 transitionend 要过滤 propertyName
一个元素同时过渡 transform 和 opacity，transitionend 会触发两次。不加判断就执行后续逻辑，容易重复调用或状态错乱。
必须检查 e.propertyName，只响应目标属性：
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'transform') {
// 这里处理位移动画结束
}
});
注意：transitionend 不冒泡，得绑定在目标元素本身；也别依赖 setTimeout 等时间点，GPU 就绪延迟或缩放设置都可能导致偏差
页面加载完成时的渐显，别等 window.onload
window.onload 等所有图片、脚本、字体加载完才触发，用户早看到内容了，加载动画还挂着反而干扰体验。
更早的时机是 DOM 解析完成、首屏关键元素就绪后立即移除遮罩：
- 用
document.addEventListener('DOMContentLoaded', ...)基本够用 - 若需更精确，可监听首屏
img的load或用IntersectionObserver观察关键容器是否进入视口 - iframe 渐显要额外小心：不能只靠
iframe.onload，得轮询iframe.contentDocument?.readyState === 'complete'，跨域时还得加超时兜底
真正容易被忽略的是“可绘制状态”——很多动画失效，不是代码写错，而是旧元素在快照前已不可见（比如 opacity: 0 或 visibility: hidden），哪怕 opacity: 0.001 都比彻底隐藏强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
