直接给加transition可行，但须写在默认状态类中、明确指定可动画属性（如background-color、transform）、避免layout属性和display等不可动画值，并添加touch-action:manipulation适配移动端。

直接给 <button></button> 加 transition 是可行的，但必须写对位置、选对属性、避开常见失效陷阱——否则动画根本不会动。

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

很多人把过渡效果写在 button:hover 里，结果鼠标移入有动画，移出却“啪”一下跳回原样。这是因为 transition 描述的是「属性变化的过程」，它得在初始状态就声明好，浏览器才知道怎么补间。

• transition 要写在基础类（如 .btn）上，不是只写在伪类里
• 别偷懒用 transition: all 0.3s，会意外触发 outline、box-shadow 等非预期变化；明确列出： transition: background-color 0.25s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)
• 如果按钮有 border，记得默认态和悬停态都定义 border-width 和 border-color，否则边框粗细突变无法过渡

优先用 transform 和 opacity 过渡，避免 width/height/layout 属性

对 width、height、left、top 等触发重排（reflow）的属性做过渡，会导致卡顿，尤其在低端设备或复杂页面中。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 想让按钮“放大”，用 transform: scale(1.05)，不是 width: 120%
• 想做淡入淡出，用 opacity: 0.8，不是 visibility: hidden（后者不可过渡）
• 需要隐藏再显示？组合 opacity: 0 + visibility: hidden + transition: opacity 0.25s，并在动画结束时用 JS 切换 visibility（若需完全脱离布局流）

移动端点击无反馈？不是代码错了，是 touch-action 被锁了

iOS Safari 和部分安卓 WebView 默认压制按钮的原生点击反馈，哪怕 CSS 写得完全正确，用户也会感觉“点不动”或动画卡在中间。

• 必须加 touch-action: manipulation 到按钮样式中，告诉浏览器：“这个元素只做点击/滑动，别拦截”
• 不要依赖 :hover 做核心交互——触屏设备首次点击才激活 hover，且行为不一致；关键操作改用 click + classList.toggle 更可靠
• 快速连点时动画可能残留，可在 JS 中加 element.style.will-change = 'transform'（慎用，仅限必要场景），或用 animation-play-state: paused 配合 @keyframes 更可控

真正容易被忽略的点是：过渡生效的前提不是“写了 transition”，而是「两个状态之间，那个 CSS 属性确实发生了可动画的数值变化」。比如 display: none → block 不行，background-image 改值也不行，input:checked 本身更不行——这些都得绕开，换成可过渡的载体（label、伪元素、transform）。

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