本文详解如何利用 css visibility + opacity + transition 组合，配合 javascript 动态切换类名，实现 bootstrap 5.3 中 spinner 的优雅淡入淡出效果，避免生硬显示/隐藏。
本文详解如何利用 css visibility + opacity + transition 组合，配合 javascript 动态切换类名，实现 bootstrap 5.3 中 spinner 的优雅淡入淡出效果，避免生硬显示/隐藏。
在 Bootstrap 5.3 中，.spinner-border 或 .spinner-grow 默认是静态元素，直接通过 display: none/block 控制显隐会导致突兀的“闪现”或“瞬隐”，缺乏视觉连贯性。要实现真正平滑的淡入（fade in）与淡出（fade out），关键在于分离可见性控制与透明度过渡——这正是 visibility 与 opacity 协同工作的经典模式。
✅ 核心原理：CSS 过渡双保险
Bootstrap spinner 本身不内置 fade 动画，因此需自定义 CSS 类来接管过渡逻辑。推荐方案如下：
#spinner {
position: absolute;
top: 49%;
left: 47%;
width: 3.5rem;
height: 3.5rem;
visibility: visible; /* 初始可见 */
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms ease-in-out;
}
#spinner.hidespinner {
visibility: hidden; /* 过渡结束后才真正不可见 */
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms ease-in-out;
}⚠️ 注意：visibility: hidden 本身不可动画，但配合 transition-delay 可实现「先淡出、再隐藏」的精确时序，防止元素在透明后仍占据布局或响应点击。
✅ JavaScript 控制：类名切换替代 display 操作
将原代码中直接操作 style.display 的方式，替换为语义更清晰、更易维护的 class 切换：
function getData() {
const spinner = document.getElementById("spinner");
// 淡入：移除 hidespinner 类 → 触发 transition 回显
spinner.classList.remove('hidespinner');
setTimeout(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => {
const container = document.getElementById("dataContainer");
data.slice(0, 5).forEach(item => {
const div = document.createElement("div");
const p = document.createElement("p");
p.textContent = item.title;
div.appendChild(p);
container.appendChild(div);
});
// 淡出：添加 hidespinner 类 → 启动 fade-out 过渡
spinner.classList.add('hidespinner');
})
.catch(err => {
console.error("数据加载失败：", err);
spinner.classList.add('hidespinner'); // 出错时也应隐藏 spinner
});
}, 5000);
}
getData();? 提示：HTML 中 spinner 初始即带 hidespinner 类（如
