如何使用CSS3实现页面淡入淡出切换_利用opacity与transition-css教程-PHP中文网

结论：只写 opacity 不会动，必须在默认状态声明 transition: opacity，且不能和 display: none 同时用；常见失效原因包括 transition 位置错误、display: none 干扰、js 同步操作过快、overflow 裁剪、transition: all 误触发及其他属性干扰。

如何使用css3实现页面淡入淡出切换_利用opacity与transition

直接说结论：只写 opacity 不会动，必须在默认状态声明 transition: opacity，且不能和 display: none 同时用。

为什么加了 `transition` 和 `opacity` 却没动画？

最常见原因是过渡声明位置错了——transition 必须写在「起始态」（比如未 hover、未加 .show 类时）的规则里，而不是只写在目标态（如 .show）中。

其他典型失效场景：

display: none 和 opacity: 0 混用：一旦 display 为 none，元素脱离渲染树，transition 完全不触发
JS 同步移除 class 后立刻操作 DOM（比如紧接着调用 removeChild），动画根本没机会开始
父容器设了 overflow: hidden 且子元素 opacity: 0 时发生裁剪，视觉上像“消失”，实则动画被截断
用 transition: all 0.3s 代替显式声明 opacity，结果其他属性（如 background-color）意外参与过渡，干扰预期

如何用 JS 安全触发动画（淡入 → 淡出 → 移除）？

关键不是“加 class”或“删 class”，而是控制时机。直接删 class 后立即销毁节点，淡出会跳变。

正确做法是监听 transitionend 事件，等动画真正结束再清理：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

const el = document.querySelector('.fade-box');
el.classList.add('show'); // 淡入

// 淡出并移除
function fadeOutAndRemove() {
  el.classList.remove('show');
  el.addEventListener('transitionend', () => {
    if (el.style.opacity === '0') el.remove();
  }, { once: true });
}

注意点：

监听前确保元素当前有 transition 声明，否则 transitionend 永远不会触发
加 { once: true } 避免重复绑定
检查 opacity 值而非仅依赖类名，防止多次调用导致误删

`visibility` 和 `opacity` 要不要一起用？

要，但得小心配对方式。单独 opacity: 0 的元素仍占布局、可聚焦、能响应点击；而 visibility: hidden 保留空间但禁用交互——两者互补。

推荐组合写法：

.fade-box {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s step-end;
}
.fade-box.show {
  opacity: 1;
  visibility: visible;
}

重点说明：