纯 CSS 无法实现点击切换灰度的状态记忆，必须配合 JavaScript；但通过 filter + transition 可实现平滑无闪退效果，关键在于显式声明 transition: filter、用 class 控制状态、完整写出多滤镜成分并保持顺序一致。
纯 CSS 无法实现“点击切换灰度”的状态记忆，必须配合 JavaScript；但只要控制得当，filter + transition 能做到真正平滑、无闪退的灰度切换效果。
为什么直接写 filter: grayscale(100%) 会闪退
常见错误是只加滤镜没加过渡：浏览器瞬间应用灰度，没有中间帧，视觉上就是“啪一下变灰”。这不是 bug，是漏写了 transition。
-
transition: filter 0.3s ease必须显式声明，不能靠继承或父级过渡 - 别用
transition: all 0.3s—— 它可能意外触发布局重排，尤其在旧版 Safari 中更不稳定 - 移动端点击延迟问题？优先用
addEventListener('click', ...)，现代浏览器已兼容，无需额外加touchstart
如何用 class 切换避免内联样式污染
直接操作 el.style.filter 容易被后续 CSS 覆盖，且难以复用。推荐用 class 控制状态，CSS 负责表现。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- HTML 中给
<img>加初始类，比如class="grayscale-toggle" - CSS 定义：
.grayscale-toggle { filter: grayscale(0); transition: filter 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }和.grayscale-toggle.active { filter: grayscale(100%); } - JS 只需切换 class：
imgEl.classList.toggle('active')，不碰 style 属性 - 注意：图片加载完成后再绑定事件，否则可能对未加载图触发失败 —— 监听
img.onload或用document.readyState === 'complete'判断
多滤镜组合时为何要显式写出所有成分
比如从 grayscale(0) brightness(100%) 切到 grayscale(100%) brightness(80%)，如果初始只写 filter: grayscale(0)，浏览器会把未声明的 brightness 当作 100% 插值，但目标值里有 brightness(80%)，导致过渡路径不一致、动画抖动。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：初始态和目标态都完整列出所有用到的滤镜函数，顺序保持一致
- 例如：
filter: grayscale(0) brightness(100%) saturate(100%)→filter: grayscale(100%) brightness(80%) saturate(70%) - 不要依赖“浏览器自动补默认值”，它在不同版本中行为可能不一致
- Safari 旧版本需加
-webkit-filter前缀，但 2026 年绝大多数环境已可省略
真正容易被忽略的是：灰度切换常被嵌在卡片或列表中，一旦多个图片共用同一套 class，又没做事件委托隔离，就容易出现状态错乱 —— 每个 <img> 应该独立维护自己的灰度状态，别靠全局变量或 class 名硬编码判断。
