CSS滤镜动画需写全filter声明、transition置于基础选择器、默认状态设brightness(1)等可插值值，否则因过渡链断裂导致跳变；opacity淡入淡出须JS两阶段切换类名避免空白帧。

直接用 filter: brightness() 或 opacity 配合 transition 就能实现，不需要 JS；但漏掉任一关键点，动画就会“咔”一下跳变或完全不动。

为什么 filter: brightness() 没过渡动画

不是浏览器不支持，而是过渡链断了。常见原因包括：

• transition 写在 :hover 规则里（必须写在基础选择器中）
• 默认状态没写 filter: brightness(1)，而是留空或用了 filter: none（none 不是可插值状态，无法过渡）
• 单位写错，比如 brightness(70)（缺%）或 brightness(0.7px)（多加单位），整条 filter 声明会被浏览器静默丢弃
• 父容器设置了 overflow: hidden，而 brightness(1.2) 后边缘泛白，实际被裁掉导致“没变化”错觉

如何让 opacity 切换图片时真正淡入淡出

单纯改 img.src 会触发空白帧，opacity 过渡覆盖不了这个间隙。必须靠 JS 控制两阶段类名切换：

• 先加 .fade 类（opacity: 0），等过渡完成
• 再替换 src，同时移除 .fade、加上 .show（opacity: 1）
• transition: opacity 0.5s ease-in-out 必须写在基础样式里，不能写成 transition: all，否则可能意外触发布局重排动画

示例关键片段：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

img { transition: opacity 0.5s ease-in-out; }
img.fade { opacity: 0; }
img.show { opacity: 1; }

多个滤镜一起用时怎么避免跳变

如果同时调亮度和对比度，:hover 里漏写某一项，那一项就会回退到浏览器默认值（通常是 1），造成意外跳变：

• 默认状态必须写全：filter: brightness(1) contrast(1);
• :hover 也必须写全：filter: brightness(0.7) contrast(1.1);
• 不能只写 filter: brightness(0.7)，否则 contrast 会重置为 1

这是最容易被忽略的细节——CSS 滤镜不是“增量更新”，而是整条声明覆盖。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！