transition必须写在基础选择器中并显式声明起始值，否则因缺少插值依据导致突变；禁用display、height:auto等不可动画属性，优先使用transform和opacity实现高性能过渡。
Transition在初始状态切换时突变，根本原因是浏览器没拿到明确的起始值，无法插值——不是代码漏了transition，而是起始值压根没声明。
transition必须写在基础选择器里，不能只靠:hover或类切换
很多人把transition塞进:hover或.active里，结果鼠标移出就“啪”一下弹回。浏览器只在属性变化时查当前元素的transition声明，如果移出后该声明没了，过渡上下文直接清空。
- ✅ 正确：在
.btn默认样式中写transition: background-color 0.25s, opacity 0.25s; - ❌ 错误：只在
.btn:hover里写transition: background-color 0.25s; - 检查开发者工具的「Computed」面板，确认
transition-property在常态和悬停态下都存在，而不是只在伪类里亮着
起始值必须显式声明，别依赖auto或默认值
比如用left做位移动画，但CSS里没写left: 0;，浏览器计算时起始值是auto，而auto → 100px无法插值，第一次必跳变。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 对
top/left/transform/margin/padding等，都要在基础选择器中写明初始值，例如transform: translateX(0); - 颜色过渡也一样：避免从
rgb(255, 0, 0)切到#ff0000，统一用hsl()或rgba()格式 - 用「Computed」面板看目标属性的当前值，如果是
auto、initial或空字符串，就是隐患点
别碰display、height:auto这些不可插值属性
display: none一设上，元素立刻从渲染树移除，transition连启动机会都没有；height: auto没有确定数值，浏览器算不出中间帧。
- 隐藏/显示切换：改用
opacity: 0+visibility: hidden，并配transition: opacity 0.3s, visibility 0s 0.3s; - 折叠展开：用
max-height: 0→max-height: 500px（别用height: auto） - 高性能位移：优先选
transform: translateX()，它能GPU加速且不触发重排 - 边框动画：避免
border: none → 2px solid，改用box-shadow或outline模拟
JS切换class时transition突然失效
执行el.classList.remove("fade-out")再.add("fade-in")，等于把带transition的类删了又加，中间断档。浏览器失去过渡上下文，只能硬切终态。
- 解决方案：把
transition声明抽到一个永不移除的基础类里（如.has-transition），只让功能类管状态（is-hidden、is-visible） - 快速修复：强制重排，比如
el.offsetHeight之后再改class，但别滥用，频繁调用会卡顿 - 更稳做法：用
getComputedStyle(el).opacity读一次，也能触发布局刷新
真正难的不是加一行transition，而是判断哪个属性有确定起始值、是否支持插值、会不会触发重排——这些细节藏在Computed面板里，不点开看，永远不知道浏览器到底“看到”了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
