HTML页面实现淡入淡出过渡效果的详细教程-html教程-PHP中文网

纯 css 淡入淡出需明确声明 transition: opacity 0.3s ease 并设初始 opacity: 0；禁用 transition: all；js 直接赋值需强制重排或 class 切换；淡出后须在 transitionend 中设 visibility: hidden 或 display: none。

html页面实现淡入淡出过渡效果的详细教程

纯 CSS 就能实现淡入淡出，不需要 JS 也能跑通；但写错一行 transition 声明，动画就完全不触发。

transition 必须写全属性名，不能用 `all`

浏览器对 transition 的解析很严格：transition: all 0.3s ease 看似省事，实则危险。它会让所有可动画属性（比如 color、margin、transform）都参与过渡，一旦这些属性在切换 class 时有隐式变化（例如父容器 font-size 变动导致子元素 line-height 微调），就会触发意外动画，造成“抽搐”或延迟启动。

更关键的是：首次显示时若没设初始 opacity，all 根本找不到“从哪开始变”，动画直接静默失败。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确写法必须明确指定属性：transition: opacity 0.3s ease;
初值必须在默认状态（非 :hover、非 .show）中声明：opacity: 0;
推荐搭配 visibility: hidden;，防止透明元素仍占位、可点击

JS 控制时为什么常“一闪而过”

直接写 el.style.opacity = '0'; el.style.opacity = '1'; 是无效的——浏览器把这两句合并为一次样式计算，中间没有渲染帧，过渡被跳过。核心不是“改了没”，而是“浏览器没机会分两帧处理”。

轻量方案：在两句之间插入强制重排语句，如 el.offsetHeight;
更推荐方案：用 class 切换驱动，例如先 el.classList.remove('show');，再 el.offsetHeight;，最后 el.classList.add('show');
批量操作多个元素时，别用 for 同步改 style，否则全部同一帧开始；改用 CSS 的 animation-delay 或 setTimeout 错开起始时间