transition需写在基础样式中，确保进退均有动画；仅对opacity、transform等可动画属性有效；避免all和display等无效属性；transitionend需过滤属性或统一时长。

平滑过渡效果不是加个 transition 就能自动生效的，关键在于「属性可动画化 + 值真实变化 + 声明位置正确」。写错一行 CSS，动画就静默失效。

transition 必须写在默认状态，不能只放 :hover 或 .active 里

鼠标移上去有动画、一移开就“啪”地跳回——这是最常见问题。根源是 transition 被错误地只写在 :hover 选择器中，浏览器离开时该规则直接失效，自然没退出动画。

• 正确做法：把 transition 放在基础样式里，比如 .btn 或 button，确保进和出都覆盖
• 哪怕只动一个属性（如 background-color），也要保证默认态和目标态都有明确值
• 如果基础态没写 transform: scale(1)，而 :hover 写了 scale(1.05)，浏览器会从 none 开始过渡，行为不可控

只对可动画化属性用 transition，别碰 display、font-size、margin

transition 对很多属性是“视而不见”的，写了也白写，还可能埋下性能隐患。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 安全高效的选择：opacity、transform（触发 GPU 加速）、background-color、color
• 慎用：width/height、max-height（设具体数值才有效，auto 不行）
• 完全无效：display、z-index、font-size（部分浏览器能动但易重排）、margin、padding
• 避免 transition: all 0.3s：它会把 box-shadow、border 等意外变化也卷进来，造成抖动或卡顿

用 transform + opacity 组合比单改 background-color 更稳

纯背景色过渡在深色模式切换或高对比场景下容易显得生硬，低端设备上也可能轻微卡顿。

• transform 和 opacity 天然走合成层，硬件加速，帧率更稳
• 推荐写法：transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1)
• 搭配使用时，基础态必须显式声明初始值，例如：transform: scale(1) translateY(0)、opacity: 1
• 若要模拟“悬停上浮+微暗”，:hover 中写 transform: scale(1.03) translateY(-2px) 和 opacity: 0.9

transitionend 事件监听容易踩坑

一个元素同时过渡多个属性，transitionend 就会触发多次——不是一次结束，而是每个属性各触发一次。

• 如果你只监听一次就移除类，可能 transform 还没结束，opacity 先触发了，动画就被截断
• 稳妥做法：加属性过滤，例如 if (e.propertyName === 'transform')
• 或者统一用固定时长（如都设 0.25s），用 setTimeout 延迟清理，避开竞态
• 注意事件冒泡：子元素的过渡也会冒泡到父级，建议用 e.stopPropagation() 或监听具体目标元素

最容易被忽略的一点：transition 不管理 DOM 结构切换。想让元素“淡入”或“滑出”，不能靠加 display: none 或切 class 就完事——得提前设好初始态（opacity: 0; transform: translateY(10px)），再用 JS 控制状态变更，否则浏览器根本检测不到值的变化。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！