如何实现加载与非加载状态间的平滑过渡效果？

要实现这种无闪烁的状态切换，核心是复用同一个DOM组件，通过CSS类切换控制状态动画，避免元素的创建/销毁操作（这是传统方案生硬闪烁的根源）。下面是具体实现方案：

基础实现：双元素状态切换 #

这种方式结构清晰，容易扩展不同状态。

1. HTML结构 #

<!-- 复用的加载容器 -->
<div class="loader-container">
  <!-- 加载状态：旋转Spinner -->
  <div class="spinner"></div>
  <!-- 完成状态：成功对勾 -->
  <div class="success-mark">✓</div>
</div>

2. CSS样式 #

通过容器的类切换，控制两个子元素的显示/隐藏与过渡动画：

/* 容器基础样式：居中定位 */
.loader-container {
  position: relative;
  width: 48px;
  height: 48px;
}

/* 加载状态：Spinner旋转动画 */
.spinner {
  width: 100%;
  height: 100%;
  border: 4px solid #e0e0e0;
  border-top-color: #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  /* 定义过渡动画，确保状态切换平滑 */
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 完成状态：Spinner收缩消失 */
.loader-container.loaded .spinner {
  transform: scale(0);
  opacity: 0;
}

/* 完成状态：对勾初始隐藏 */
.success-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 36px;
  color: #4CAF50;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 完成状态：对勾放大显示 */
.loader-container.loaded .success-mark {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Spinner旋转关键帧 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3. JavaScript控制逻辑 #

只需切换容器的类，无需修改DOM结构：

// 模拟异步加载（比如支付请求）
function handlePaymentSubmit() {
  const loader = document.querySelector('.loader-container');
  
  // 重置为加载状态
  loader.classList.remove('loaded');
  
  // 模拟API请求
  setTimeout(() => {
    // 加载完成，切换状态
    loader.classList.add('loaded');
  }, 2000);
}

// 触发加载流程
handlePaymentSubmit();

进阶优化：单元素极简实现 #

如果追求更简洁的DOM结构，可以用单个元素+伪元素实现：

<div class="loader-single"></div>

.loader-single {
  width: 48px;
  height: 48px;
  border: 4px solid #e0e0e0;
  border-top-color: #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transition: all 0.3s ease-out;
  position: relative;
}

/* 完成状态：停止旋转，修改边框样式 */
.loader-single.loaded {
  animation: none;
  border-color: #4CAF50;
  transform: scale(0.9);
}

/* 完成状态：通过伪元素显示对勾 */
.loader-single.loaded::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: white;
}

核心注意事项 #

• 禁止DOM增删操作：不要在加载完成时删除Spinner或新增成功元素，DOM操作会触发重排重绘，导致闪烁。
• 同步过渡时长：确保加载状态消失和完成状态出现的过渡时长一致，避免视觉脱节。
• 动画冲突处理：切换到完成状态时，必须停止加载动画（设置animation: none），防止旋转动画与过渡动画冲突。

内容的提问来源于stack exchange，提问作者Gigabit