transition没动画是因为：一、属性不支持过渡（如display、height:auto）；二、未在初始状态定义transition；三、前后状态无实际变化。

transition 为什么没动画？检查这三件事

transition 失效最常见原因不是写错了，而是属性本身不支持过渡或状态变化没被浏览器识别。比如 display: none 切到 block，浏览器直接跳变，因为 display 不可过渡；又比如 height: auto 无法过渡，浏览器不知道目标值是多少。

• 只对「数值型、可计算」的 CSS 属性生效：优先用 opacity、max-height、transform 替代 display 或 height
• transition 必须写在初始状态选择器里（比如 .card），不能只写在 hover 或 active 状态中
• 确保前后状态有明确差异：比如从 opacity: 0 → opacity: 1，而不是 opacity: 0 → opacity: 0（哪怕类名变了，值没变也不触发）

JS 动态插入内容时，opacity 动画跳帧怎么办

JS 插入新 DOM 后立刻加 fade-in 类，浏览器常来不及计算初始样式，导致第一帧就显示为 opacity: 1，动画失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 插入后强制重排：调用 element.offsetHeight 或 getComputedStyle(element).opacity，让浏览器同步计算样式
• 更稳妥的做法是微任务延迟：Promise.resolve().then(() => element.classList.add('fade-in'))
• 别依赖 display: none 配合 opacity: 0 —— 如果元素一开始没在 DOM 中，opacity: 0 根本不生效

响应式场景下，max-height 过渡怎么设才靠谱

想用 max-height 模拟 height: auto 的展开收缩动画，但设太小会截断内容，设太大又影响性能和动画节奏。

• 不要用 max-height: 0 → max-height: 1000px 这种“保险值”——移动端可能撑爆视口，且动画末段明显拖沓
• 推荐方案：先用 JS 测量内容真实高度（el.scrollHeight），再动态设置 max-height；或用固定阶梯值（如 max-height: 240px）匹配常见卡片/菜单高度
• 搭配 overflow: hidden 和 opacity 使用，避免内容溢出或闪烁

transition 性能陷阱：哪些属性该优先用 transform

用 top / left 移动元素会频繁触发 layout（重排），尤其在滚动或动画密集场景下卡顿明显；而 transform: translate() 只走合成层，GPU 加速，流畅得多。

• 所有位移、缩放、旋转动画，一律用 transform，别碰 margin、top、width 等触发布局的属性
• 如果必须过渡尺寸变化（比如按钮 hover 变大），用 transform: scale() 替代 width/height
• 注意 transform-origin 要和 transform 写在同一元素上，否则可能偏移预期中心点

实际做响应式加载过渡时，最易被忽略的是「初始状态是否真实存在」——元素没挂载、没渲染、没计算尺寸，再漂亮的 transition 都只是摆设。动画不是加个类就完事，得确认它真正在 DOM 里、有盒模型、有可读取的初始值。

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