应明确指定transition-property，只对需过渡的属性启用动画，避免使用all或省略property；推荐写法如transition: color 0.2s, background-color 0.2s, transform 0.3s；简写时须按property duration timing-function delay顺序并显式声明property。
当多个 CSS 属性同时变化，而你只希望其中某几个属性有过渡效果时，不加限制的 transition: all 0.3s 或 transition: 0.3s 很容易导致意外的动画行为——比如背景色、边框、阴影甚至 transform 全部一起动，视觉混乱，性能也可能受影响。解决核心就是：**明确指定 transition-property，只对真正需要过渡的属性启用动画。**
只给需要过渡的属性单独写 transition
避免使用 all 或省略 property，而是列出具体属性名。这样其他属性变更（如临时加 display: none、改 z-index、切 visibility）完全不会触发过渡。
-
✅ 推荐写法：
transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1); -
❌ 避免写法：
transition: all 0.3s;（所有属性都参与过渡，易冲突）transition: 0.3s;（等价于transition-property: all，同上）
用简写 transition 时务必带 property 参数
CSS transition 简写语法顺序是：property duration timing-function delay。如果漏掉 property，浏览器会默认为 all。
-
⚠️ 错误示例（看似只写了时长，实际等效于
all）：transition: 0.3s ease; -
✅ 正确示例（显式声明 property）：
transition: opacity 0.3s ease, box-shadow 0.3s ease;
对不同状态使用不同 transition 组合
:hover、:focus、.active 等状态可能需要过渡不同属性。这时可分别设置，互不干扰。
- 比如按钮悬停时只动
background-color和transform，点击激活时只动box-shadow：button { transition: background-color 0.2s, transform 0.2s; }<br>button:active { transition: box-shadow 0.15s; } - 注意：后声明的 transition 会覆盖前一个（同选择器下），但不同伪类之间独立生效。
慎用 transition: all —— 除非你真需要它
极少数场景（如主题切换动效）可能需要批量过渡，但必须配合属性白名单或 JS 控制。日常开发中，更安全的做法是：
- 初始状态只设必要过渡属性；
- 用
will-change提前提醒浏览器哪些属性将变化（仅限transform、opacity、scroll-position等可优化属性）； - 动画逻辑复杂时，优先考虑
@keyframes + animation，控制更精确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
