过渡动画必须配合CSS transition属性实现，HTML编辑器仅生成结构，不提供动画能力；需手动编写CSS规则并正确绑定，注意class切换、display与opacity配合、缓存问题及Safari兼容性限制。
过渡动画必须配合 CSS transition 属性，HTML 编辑器本身不提供动画能力
很多新手误以为在 HTML 编辑器（如 TinyMCE、CKEditor、或者 VS Code 的预览插件）里点几下就能加“页面切换动画”，其实不是。HTML 编辑器只负责生成/编辑 HTML 内容结构，transition 是纯 CSS 行为，需要你手动写样式规则并绑定到元素上。
常见错误现象：
– 在编辑器里插入了带 class="fade" 的 <div>，但页面没动画 → 缺少对应 CSS 规则
– 动画只触发一次或不触发 → 没有通过 JS 切换 class，或没触发布局重绘
-
transition必须写在「初始状态」的 CSS 里，不能只写在 hover 或 active 状态中 - 推荐写全三个参数：
transition: opacity 0.3s ease-in-out, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);，避免浏览器用默认值导致行为不一致 - 如果用编辑器输出纯 HTML（比如导出为静态页），确保
<style>块或外链 CSS 文件已正确引入，否则动画完全失效
给按钮点击后的内容块加淡入淡出，关键在 class 切换 + transition 配合
这是最常被问到的场景：用户点按钮，下方区域平滑展开/收起。它不依赖框架，原生 JS 就能搞定，但要注意 DOM 更新时机和 display 切换的坑。
典型错误：
– 直接对 display: none 元素设 opacity: 0 → 不生效，因为 display: none 的元素不参与渲染流程
– 只改 opacity 却不控制 height 或 max-height → 内容会突然撑开布局，失去“过渡感”
立即学习“前端免费学习笔记（深入）”；
- 用
opacity+visibility控制显隐（visibility: hidden保留占位，display: none彻底移除） - 展开时先设
visibility: visible，再用setTimeout延迟一帧加opacity: 1类，触发 transition - 更稳妥的做法是用
max-height过渡（配合足够大的预设值，如max-height: 500px），避免 JS 计算真实高度
VS Code / Typora 等轻量编辑器里写过渡动画，记得关掉实时预览的缓存
这类编辑器的内置预览常会复用旧样式表或跳过 CSS 重载，导致你改了 transition 时间却看不到变化。
使用场景：
– 你在 style.css 里把 transition-duration 从 0.2s 改成 1s，预览窗口毫无反应
– 修改后刷新页面仍走老样式 → 浏览器或编辑器缓存了 CSS
- VS Code 中用 Live Server 插件时，右键 HTML 文件 → “Open with Live Server”，别用内置 Preview
- Typora 用户需关闭「硬件加速」（设置 → 外观 → 取消勾选），否则 CSS 动画可能被禁用或卡顿
- 所有本地测试务必在地址栏看到
http://（而非file://），否则部分 transition 和 fetch 会被浏览器策略拦截
移动端 Safari 对 transition 有兼容性限制，别用 position: sticky 做过渡目标
这是上线前最容易被忽略的坑：PC 上一切正常，iOS 微信或 Safari 打开就卡顿、跳变甚至无动画。
原因：
– Safari 旧版（iOS 15.4 之前）对 transform + will-change 组合支持不稳定
– position: sticky 元素无法被 transition 平滑驱动，强行加会导致回滚式闪烁
- 动画目标元素优先用
transform: translateY()而非top/margin-top - 涉及滚动联动的动画（如吸顶导航淡入），加
backface-visibility: hidden强制开启 GPU 加速 - 测试时真机连 Safari Web Inspector，看 Elements 面板里 transition 是否被标记为 “inactive” —— 如果是，说明属性不被支持
transition-timing-function，也可能让整个交互动起来或彻底失效。 
