transition不生效主因是css优先级不足或safari兼容性问题，需用computed面板定位规则、提升选择器权重、显式重置子属性并注意-webkit前缀。
媒体查询里 transition 不生效？先检查是否被更高优先级规则覆盖
移动端过渡效果关不掉，大概率不是媒体查询写错了，而是 CSS 优先级没压住。比如你在 @media (max-width: 768px) 里写了 transition: none，但组件库或全局样式里用了 transition: all .3s ease 且选择器更具体（如 .btn--primary:hover），那你的 none 就直接被无视。
实操建议：
- 用浏览器开发者工具「Computed」面板，点开
transition属性，看最终生效的是哪一条规则、来自哪个文件和行号 - 确保覆盖规则的选择器权重 ≥ 原始规则，比如原始是
.card .title，你就别只写.title，改用.card .title或加!important（仅限兜底） -
transition: none必须写全，不能只写transition-property: none—— 后者只禁属性，时长和缓动还在，照样触发过渡
transition: none 在 Safari iOS 上失效？注意 -webkit- 前缀兼容性
iOS 15.4 之前，Safari 对 transition: none 的解析有 bug：它会忽略这个声明，继续执行上一个生效的过渡定义。这不是你写错了，是渲染引擎的问题。
实操建议：
- 对需要关闭过渡的元素，显式重置全部子属性：
transition-property: none; transition-duration: 0s; transition-timing-function: step-start; - 如果目标是彻底禁用，更稳妥的做法是删掉触发过渡的条件本身，比如把
:hover或.is-active类的样式直接移除，而不是靠transition: none拦截 - 避免在媒体查询中只写
transition: 0s—— 这不是合法值，会被整个声明丢弃
用 JS 动态切换 transition 状态？别直接操作 style，改 class 更可靠
想在用户点击后临时关闭过渡（比如弹窗打开瞬间不想有动画），很多人会写 el.style.transition = 'none'，但这样容易和 CSS 规则冲突，且后续恢复麻烦——你得记住原来是什么值，还可能漏掉 vendor 前缀。
实操建议：
- 预设两个 class：
.no-transition（含transition: none !important）和默认的.with-transition - JS 只负责增删 class：
el.classList.add('no-transition')，动画结束后再remove - 如果必须用内联样式，记得同步处理
-webkit-transition，否则 iOS 下仍可能生效
transition 关闭后仍有视觉残留？检查 transform 和 opacity 是否还在动
关掉 transition 并不等于关掉所有动画表现。如果你的元素同时用了 transform: translateX(10px) 和 opacity: 0.5，而这两个属性本身没被 transition 绑定，那它们的变更仍是“瞬时”的；但人眼看到的“残留感”，往往来自父容器或相邻元素的过渡未同步关闭。
实操建议：
- 用
transition: none时，确保作用到整条渲染链：不仅目标元素，它的::before/::after伪元素、父容器的overflow变化、甚至box-shadow都要一并重置 - 检查是否有 CSS 动画（
@keyframes+animation）在运行，它和transition是两套机制，关一个不影响另一个 - 真要彻底静默，最简单的方法是加
pointer-events: none配合visibility: hidden，但这属于交互层屏蔽，不是过渡控制
真正难的不是写 @media，而是搞清 transition 的生效链条有多长——它可能藏在 reset.css 里、框架默认样式里、甚至某个第三方组件的 shadow DOM 中。关不掉的时候，先查 computed，再查继承，最后才动代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
