在低端安卓机上应使用 opacity 替代 filter 实现淡入，因其稳定、零重排且可 gpu 合成；须删除所有 filter 相关 css，仅保留 opacity 与 transition，并配合 onload 检测、绝对定位、静态布局及极简 js 控制。
在低端安卓机上，用 opacity 替代 filter 实现轻量淡入，核心是绕开硬件加速缺失、JS阻塞和渲染抖动问题。这类设备（如 Android 4.4–6.0 的 WebView 或旧版 UC/X5 内核）对 filter: blur() 支持极差，甚至直接崩溃，而 opacity 是唯一稳定、零重排、可被 GPU 合成的属性。
只用 opacity + transition，禁用所有 filter 相关代码
低端机上任何 filter 声明（哪怕只是 filter: none）都可能触发降级渲染或白屏。务必删掉所有含 filter 的 CSS 规则，包括 backdrop-filter、blur()、grayscale() 等。只保留：
-
opacity: 0;和opacity: 1; -
transition: opacity 0.3s ease-out;（避免ease-in-out，低端机起始帧易卡顿） - 搭配
visibility: hidden / visible防止透点或焦点残留
图片淡入必须等加载完成再触发，不能靠 scroll 或定时器
低端安卓 WebView 对 IntersectionObserver 支持率接近 0，img.decode() 会报错或静默失败。可靠做法只有：
- 监听
img.onload事件，且必须先检查img.complete === true（缓存图已就绪） - 若用懒加载，改用
getBoundingClientRect()+setTimeout模拟简单视口判断（不依赖 API） - 切忌 JS 中先加 class 再设
src——必须等src设置后、onload 触发，才添加show类
强制脱离文档流，避免重排干扰动画
低端机对布局计算敏感，opacity 动画若在流式容器中触发，常因父元素重排导致跳帧。解决方案：
- 给淡入元素加
position: absolute或position: fixed（需确保父容器有position: relative） - 显式声明宽高：
width和height（不用aspect-ratio，老内核不支持） - 移除所有
margin、padding变化逻辑，保持布局静态
JS 控制要极简，避免同步操作打断渲染
低端机主线程压力大，JS 同步修改样式极易阻塞过渡。关键守则：
- 只用
element.classList.add('show')，绝不用element.style.opacity = 1 - 若需动态插入元素，用
document.createElement+appendChild后，加setTimeout(() => el.classList.add('show'), 16)（留出一帧空隙） - 禁用
will-change: opacity——老内核会强制软件渲染，反而更慢
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
