在绝对定位Div中实现固定高度文本淡入淡出的最优方案

纯CSS方案（无需JS） #

利用CSS Grid的堆叠特性自动适配最高文本高度，结合CSS动画实现淡入淡出切换，完全不需要JS计算尺寸或监听resize。

HTML结构

<div class="quote-container">
  <blockquote class="quote">第一条来自CMS的文本引用，可能比较长，换行显示也没问题</blockquote>
  <blockquote class="quote">第二条短文本</blockquote>
  <blockquote class="quote">第三条长度中等的文本引用，测试不同高度的适配</blockquote>
</div>

CSS样式

.quote-container {
  width: 300px; /* 固定宽度 */
  margin: 0 auto;
  display: grid; /* 用grid让所有quote堆叠在同一单元格 */
  gap: 0;
  min-height: 80px; /* 可选：设置最小高度防止加载时跳动 */
}

.quote {
  grid-area: 1 / 1; /* 强制所有quote放在第一行第一列，自动堆叠 */
  margin: 0;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  animation: quoteFade 9s infinite; /* 总时长 = 单条显示时长 * 数量，这里3条每条3秒 */
}

/* 为每条quote设置不同的动画延迟 */
.quote:nth-child(1) { animation-delay: 0s; }
.quote:nth-child(2) { animation-delay: 3s; }
.quote:nth-child(3) { animation-delay: 6s; }

@keyframes quoteFade {
  0% { opacity: 0; visibility: hidden; }
  5% { opacity: 1; visibility: visible; } /* 淡入 */
  30% { opacity: 1; visibility: visible; } /* 停留显示 */
  35% { opacity: 0; visibility: hidden; } /* 淡出 */
  100% { opacity: 0; visibility: hidden; }
}

方案说明 #

• 高度自适应：Grid容器会自动取所有quote中最高的元素高度，无需JS遍历计算，窗口resize时也会自动调整，完全替代原方案中的尺寸计算逻辑。
• 淡入淡出控制：通过animation-delay为每条文本设置轮播顺序，动画中用visibility配合opacity避免透明元素干扰交互（可选）。
• CMS适配：只需从CMS循环生成<blockquote class="quote">元素即可，无需额外处理，新增文本时只需调整总动画时长和对应nth-child的延迟。

极简JS优化（可选） #

如果CMS文本数量不固定，用几行JS自动计算动画延迟，避免手动写nth-child：

const quotes = document.querySelectorAll('.quote');
const displayTime = 3; // 每条文本显示3秒
quotes.forEach((quote, index) => {
  quote.style.animationDelay = `${index * displayTime}s`;
});
document.querySelector('.quote-container').style.animation = `quoteFade ${quotes.length * displayTime}s infinite`;

这段JS仅做动画参数的动态设置，依然不需要尺寸计算和resize监听。

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