如何实现文本块从下到上的平滑过渡而非瞬间弹出？

以下是实现文本块从下到上平滑过渡的修改方案：

修改后的代码 #

CSS #

.image-container {
  position: relative;
  width: 300px; 
  height: 200px;
  background: rgba(0, 0, 0, 0.3);
}

.text-content {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); 
  color: #fff; 
  padding: 10px; 
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.hidden-text {
  max-height: 0;
  overflow: hidden;
  margin-top: 10px;
  transition: max-height 0.5s ease-in-out;
}

.image-container:hover .hidden-text {
  max-height: 200px; /* 设为足够容纳文本的高度，可根据需求调整 */
}

.arrow {
  transition: opacity 0.5s ease;
}

.image-container:hover .arrow {
  opacity: 0;
}

HTML #

<div class="image-container">
  <div class="text-content">
    <span class="visible-text">Visible text <span class="arrow">▼</span></span>
    <span class="hidden-text">This is some additional text that will be revealed when you hover over the visible part.</span>
  </div>
</div>

方案说明 #

1. 替换无效的display过渡：移除了无法生效的transition: display，改用max-height实现平滑展开。hidden-text初始设置max-height: 0和overflow: hidden隐藏内容，hover时将max-height设为足够大的值，触发高度过渡动画。
2. 自适应文本内容：无需固定高度，只要max-height的值大于文本实际高度，就能适配不同长度的内容，避免箭头被遮挡的问题。
3. 箭头平滑消失：将过渡属性直接定义在.arrow类上，确保hover时箭头的透明度变化是平滑的。

这种方法利用CSS高度过渡实现文本块向上展开的动画，同时保持内容的自适应能力，符合你想要的平滑过渡效果。

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