根本原因是直接操作 innerhtml 导致浏览器强制重排：旧 dom 被整块删掉，新 html 字符串重新解析、构建、布局、绘制，中间存在空白帧，用户感知为内容消失→短暂空白→突然出现。

为什么过滤后列表“闪一下”才更新？

根本原因是直接操作 innerHTML 导致浏览器强制重排：旧 DOM 被整块删掉，新 HTML 字符串重新解析、构建、布局、绘制，中间存在空白帧。用户感知就是内容消失→短暂空白→突然出现。

真正稳的写法是只更新变动部分：

• 用 DocumentFragment 缓存所有新 <li> 节点，最后一次性挂载到容器
• 或提前创建好空容器（如 <div id="list-container"></div>），每次只清空它再 appendChild 新节点
• 避免在循环里反复读写 innerHTML，哪怕只是拼接字符串再赋值

怎么让过滤结果带淡入/滑动动画？

CSS transition 不能作用于 display 或 visibility 的切换，但可以配合 opacity + transform 实现平滑入场。

关键点在于状态控制和类名切换：

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

• 默认项加 .item { opacity: 1; transform: translateY(0); transition: opacity 0.2s, transform 0.2s; }
• 隐藏时加 .item.hidden { opacity: 0; transform: translateY(-10px); }（注意不是 display: none）
• JS 过滤后，对匹配项移除 .hidden，不匹配项加上 .hidden
• 动画只走 opacity 和 transform，不碰 height 或 margin，否则触发重排

移动端输入框收起键盘时清空搜索词？

这是 iOS Safari 和部分安卓浏览器的常见误判：软键盘收起会触发 blur 事件，如果监听了它并执行 input.value = ''，用户刚输一半就被清掉。

正确响应时机只有两个：

• 用户点击清空按钮（显式操作）
• 按 ESC 键（keydown 事件中判断 e.key === 'Escape'）
• 其他任何时机——包括 blur、focusout、甚至页面切后台——都该保留输入内容

filter() 匹配中文/符号为啥失效？

不是编码问题，而是大小写转换逻辑没覆盖全。比如 searchText.toLowerCase() 对中文、数字、标点无影响，但若原始数据字段含空格或换行，includes() 就可能漏匹配。

实操必须加清洗：

• 搜索前先 searchText.trim().toLowerCase()
• 匹配时统一转小写：item.name.toLowerCase().includes(searchText)
• 多字段支持用 || 连接：item.name.toLowerCase().includes(q) || item.desc.toLowerCase().includes(q)
• 空字符串或纯空格时，直接返回全部数据，别走 filter 逻辑

过滤动画真正的复杂点不在 JS 逻辑，而在 DOM 更新节奏和 CSS 动画触发时机的耦合——稍一错位，就变成“先闪再动”或“动完才显”。务必把状态变更、类名切换、DOM 挂载三步拆清楚，别混在同一个函数里。

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