a元素的transition必须写在默认状态而非:hover中，仅对color、background-color、opacity、transform等可动画属性有效；display、height、visibility单独使用无效；移动端需兼顾:focus或touchstart；伪元素动画需单独加transition；禁用点击后交互并配合JS精准控制加载态；transition失效主因是元素未挂载、起止值相同或JS连续操作未触发重排。
直接给 a 元素加 transition 就能生效，但必须写在默认状态里，且只对可动画属性起作用；color、background-color、opacity、transform 是安全选择，display、height、visibility（单独用）都不行。
hover 时颜色/背景色怎么平滑过渡
这是最常用也最容易出错的场景。很多人写了 :hover { color: #007bff; } 却没加 transition，或者把它错写在 :hover 块里。
-
transition必须写在非 hover 的基础样式上，比如a { color: #333; transition: color 0.25s ease; } - 别写
transition: all 0.25s—— 它会意外过渡border、padding等，引发布局抖动 - 移动端不响应
:hover，建议同时加a:focus规则，或用 JS 监听touchstart模拟 - 如果用了伪元素（如
::after绘制下划线），记得单独给它加transition，否则会突兀出现
下划线从无到有怎么动画
靠 width + transform 控制，不能依赖 height 或 display。
- 结构上：每个
a里包一个span或用::after作为下划线载体 - CSS 示例：
a::after { content: ""; display: block; width: 0; height: 2px; background: #007bff; transition: width 0.3s ease; } -
a:hover::after { width: 100%; }—— 注意这里不能用left: 50%; transform: translateX(-50%)居中展开，除非你明确想做“从中点向两边伸展”效果 - 避免用
border-bottom直接过渡 —— 它无法从 0 线宽平滑变粗，浏览器不支持border-width插值
点击后禁用链接并加加载态过渡
静态页面没这需求，但真实项目中导航常触发路由跳转或异步加载，用户需要视觉反馈。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 点击瞬间就该禁用交互：
a:active { pointer-events: none; opacity: 0.6; } - JS 中点击后立即加 class（如
is-loading），再配合 CSS 做细微指示，比如border-bottom: 2px solid #007bff;或background-image: linear-gradient(...); - 别用旋转图标（
transform: rotate()）—— 面包屑或紧凑导航里文字易错位，且transform在小尺寸容器中渲染不稳定 - 加载完成后再移除 class；别靠
setTimeout模拟，应以实际请求完成为准
transition 失效的三个硬核原因
不是代码写错了，而是浏览器根本没机会拍到变化帧。
- 元素还没挂载或被
display: none/visibility: hidden隐藏 —— transition 不触发 - 起始值和结束值相同，比如
opacity: 1 → opacity: 1，哪怕你写了transition也没用 - JS 中连续改样式没留重排空隙，比如
el.classList.add('active'); el.style.opacity = '1';—— 浏览器合并渲染，过渡跳过。补救：中间插一句el.offsetHeight强制读取布局
真正难的不是写对那几行 CSS，而是判断什么时候该用 max-height、什么时候必须切到 transform、以及 JS 控制时机里那一毫秒的重排窗口 —— 这些地方一错，动画就断在半路。
