filter+transition可实现平滑切换，但需确保函数形式一致（如grayscale(100%)↔grayscale(0%)）、避免与transform共存、统一字符串格式并适配prefers-reduced-motion。
直接用 filter + transition 就能实现平滑切换，不需要 JS 或额外图层 —— 但必须注意 filter 值的写法要严格一致，否则动画会直接跳变。
filter 动画生效的前提条件
浏览器只对「可插值」的 filter 函数做过渡计算，比如 grayscale(100%) → grayscale(0%) 可以动，但 grayscale(100%) → none 不行 —— 因为 none 是关键字，不是数值函数，无法插值。
- ✅ 正确写法：
grayscale(100%)↔grayscale(0%)、brightness(0.5)↔brightness(1) - ❌ 错误写法：
grayscale(100%)↔none、blur(2px)↔unset - 多个滤镜组合时，函数顺序和数量必须完全一致，否则 Chrome/Safari 会静默降级为无动画
hover 触发时常见的视觉卡顿原因
不是代码写错了，而是渲染路径被意外打断。最典型的是：图片父容器用了 transform: translateZ(0) 或 will-change: transform，导致 filter 动画被迫走软件渲染，帧率骤降。
- 避免在同个元素上同时设置
filter和transform（尤其带z轴的） - 如果必须用 transform，改用
translateX(0)替代translateZ(0)，或把 filter 移到伪元素上 - 高分辨率图 + 多重滤镜（如
blur(1px) contrast(110%) saturate(90%)）在低端设备可能掉帧，建议加prefers-reduced-motion降级
Vue/React 中动态控制 filter 的坑
框架绑定 style 时容易忽略空格和单位格式 —— 浏览器对 filter 字符串极其敏感，多一个空格、少一个括号都会让 transition 失效。
- Vue 模板中不要写
:style="{ filter: `grayscale(${isGray ? 100 : 0}%)` }"，应统一用完整函数形式：grayscale(100%)/grayscale(0%) - React 中若用
useState切换，确保初始值和目标值都是合法 filter 字符串，别用""或null - 服务端渲染（SSR）场景下，首次 hydration 可能因初始 filter 值缺失导致闪动，需在
data或useState中预设明确值
真正难的不是写出来，而是让过渡在各种设备上都稳定 —— 关键就两点：filter 字符串完全可比对，且不和触发硬件加速的属性共存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
