不存在 transition-behavior-allow-discrete 属性；过渡闪烁主因是属性频繁重设、display/visibility误用及图层未稳定，解决需精确声明transition、will-change提层并及时清理、强制同步布局。
目前没有 transition-behavior-allow-discrete 这个 CSS 属性，它并不存在于任何浏览器标准或实现中。 搜索该名称大概率是混淆了 Web Animations API 中的 composite 或 iterationComposite，或是误传的实验性提案（从未进入草案阶段）。真实场景中遇到过渡多次触发后的闪烁，问题根子不在“缺一个开关”，而在属性选择、队列管理与渲染层控制上。
为什么 transition 多次触发会闪烁
根本不是浏览器“没处理好离散变化”，而是：过渡属性被频繁重设（比如连续 hover 进出），导致浏览器在主线程来不及完成前一帧的合成，又强行插入新目标值，造成动画中断、回退、跳帧。常见诱因包括：
- 用了
transition: all 0.3s，任意样式变动都触发过渡，哪怕只是color和transform同时变 - 用
display: none或visibility: hidden配合过渡——这两个属性根本不能动画，一设即生效，直接打断 opacity/transform 过渡流程 - 元素未独立成层，每次
transform变化都触发重排或软件渲染，尤其在 Safari 或低端安卓 WebView 中
真正有效的修复方式：锁定属性 + 强制图层 + 清空队列
不用等不存在的属性，三步到位：
- 把
transition: all 0.3s改成精确声明：transition: transform 0.25s ease, opacity 0.2s linear—— 只让真正需要动的属性响应变化 - 在 JS 触发前加一层保障：
el.style.willChange = 'transform, opacity';，动画结束回调里立刻清掉：el.style.willChange = 'auto'; - 若用 JS 批量切换 class 或内联样式，先读一次布局强制同步：
void el.offsetHeight;，再改样式，避免浏览器把多次变更合并进单次重排而丢帧
Safari 和移动端特别要注意的坑
这些环境对合成策略更敏感，容易因小疏漏闪屏：
- 别依赖
transitionend立即删 DOM 或切display—— Safari 下事件可能不冒泡、可能触发两次（transform和opacity各一次），建议用setTimeout(() => {}, 0)延迟清理 - 如果用了
backdrop-filter或filter: blur()，它们会抑制硬件加速，此时加transform: translateZ(0)可能无效；应优先用transform + opacity替代滤镜动画 - 滚动中触发动画？Safari 对 scroll 期间的样式变更极敏感，必须提前加
will-change: transform，但仅限滚动开始前动态加，滚完立刻移除
最易被忽略的是：你以为在修“过渡”，其实是在调浏览器的合成管线。只要某次 opacity 变化让图层升降了一次，就可能闪一下——这和 timing function 无关，也和有没有 forwards 无关，只和你有没有稳住那个图层有关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
