如何让Read More按钮实现平滑缓慢的过渡效果？

原W3Schools的Read More示例默认过渡很生硬，因为它通常直接切换元素的display属性（从none到block），而display无法被CSS过渡动画处理。要实现平滑展开/收起的效果，我们可以改用max-height结合CSS过渡属性来实现，具体方案如下：

核心思路 #

用max-height替代display控制元素可见性：

• 折叠状态下，设置max-height: 0 + overflow: hidden隐藏额外内容
• 展开状态下，设置一个足够大的max-height（需大于内容实际高度）
• 给元素添加transition属性，让max-height的变化产生平滑过渡

修改后的完整代码示例 #

HTML

<div class="read-more-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="read-more-text">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
  <button class="read-more-btn">Read More</button>
</div>

CSS

.read-more-text {
  /* 默认隐藏额外内容 */
  max-height: 0;
  overflow: hidden;
  /* 自定义过渡效果：时长0.5秒，缓动曲线为ease */
  transition: max-height 0.5s ease;
}

/* 展开状态的样式类 */
.read-more-text.expanded {
  /* 设置足够大的max-height，确保容纳全部内容 */
  max-height: 1000px;
}

.read-more-btn {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

JavaScript

const readMoreBtn = document.querySelector('.read-more-btn');
const readMoreText = document.querySelector('.read-more-text');

readMoreBtn.addEventListener('click', function() {
  // 切换展开/收起的样式类
  readMoreText.classList.toggle('expanded');
  // 同步切换按钮文字
  this.textContent = readMoreText.classList.contains('expanded') ? 'Read Less' : 'Read More';
});

关键细节调整 #

• 过渡时长：可以修改0.5s调整速度，比如0.8s更慢，0.3s更快
• 缓动函数：ease是默认的先慢后快再慢的效果，也可改用linear（匀速）或ease-in-out（更平滑的进出）
• max-height取值：需设置一个大于内容实际高度的数值，避免内容被截断，不确定高度时设1000px这类足够大的值即可

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