如何用CSS transition实现背景图片淡入淡出-css教程-PHP中文网

transition必须写在基类上，否则淡出无动画；正确做法是将transition和显式opacity设在默认类如.bg-slide中，并用absolute定位使背景图叠层；js切换需监听transitionend事件并过滤属性，避免叠加闪烁；opacity=0不移除交互，需配合remove或visibility:hidden处理。

如何用css transition实现背景图片淡入淡出

transition必须写在基类上，不能只加在切换类里

背景图淡入淡出失效，90%是因为transition: opacity 0.3s只写在.active这类动态类里。浏览器只在类存在时才读取它的声明，而移除类的瞬间，过渡就没了——结果就是“淡入有动画，淡出直接消失”。

正确做法是把过渡声明放在元素默认状态（比如.bg-slide）中：

.bg-slide {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.bg-slide.inactive {
  opacity: 0;
}

这样无论inactive加还是删，opacity变化都受控。

别用transition-all：它会把后续所有样式变更（比如background-position微调）也套上过渡，干扰节奏
初始opacity必须显式设为1或0：依赖浏览器默认值（通常是1）但不写出来，会导致首次添加类时无过渡
如果用 Tailwind，transition-opacity和duration-300必须出现在初始 class 列表里，不能等 JS 切换时才拼进去

图片必须叠层定位，否则 opacity 没意义

纯靠opacity切换背景图，前提是所有图在同一位置可见。如果它们还在文档流里排列，opacity=0 的图仍占空间，新图会被挤到下面，根本“淡入”不到预期位置。

关键 CSS 是：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.bg-container {
  position: relative;
  width: 100%;
  height: 400px;
}
.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

position: absolute必须加在每张图的 class 上，不是只加在容器上
所有.bg-slide要尺寸一致、定位重合，否则 opacity 变化时会出现错位或留白
别用display: none配合 opacity：display变化会中断 transition，导致动画丢失

JS 切换时序错了，opacity 会打架

常见错误是同时给多张图设opacity: 1，或者没等前一张 fade out 就开始下一张 fade in，结果出现半透明叠加、闪烁甚至卡顿。

安全做法是：先统一设所有图opacity: 0，再单独设当前图opacity: 1；且切换逻辑必须等待transitionend事件，而不是硬写setTimeout：

el.addEventListener('transitionend', (e) => {
  if (e.propertyName !== 'opacity') return;
  if (window.getComputedStyle(el).opacity === '0') {
    el.classList.remove('active');
  }
});

必须过滤e.propertyName === 'opacity'：避免transform或height的过渡事件误触发
检查当前 computed opacity 是否为'0'：防止多次触发或冒泡干扰
移动端 Safari 对 opacity 动画优化差，可加will-change: opacity或transform: translateZ(0)强制硬件加速

opacity=0 不等于隐藏，DOM 和交互还在

opacity: 0只是让图不可见，但它依然占据布局、响应鼠标事件、被屏幕阅读器读取、影响 tab 键顺序。如果你的目标是“彻底移除”，不能只靠 CSS。

真正清理 DOM 的时机，是 opacity 动画结束且值确认为 0 后：

监听transitionend后调用el.remove()，或设visibility: hidden + pointer-events: none
别混用visibility: hidden和opacity过渡：visibility 不可动画，加了反而让 opacity 动画“提前消失”
如果轮播图带<img>标签，确保img本身也有opacity过渡，否则 src 切换时会闪一下