如何为「查看更多/收起」文本展开功能添加平滑下滑动画？

嘿，我太懂你这种踩坑的感觉了——给展开收起功能加个看似简单的动画，结果要么没反应要么直接把内容搞没了，真的挺闹心的。我来给你拆解下问题，再给个靠谱的实现方案：

先说说你之前踩的坑 #

1. .slideDown()/.slideUp()失效的原因：这俩是jQuery专属方法，要是你用的原生JS直接调用肯定没用；就算用jQuery，也要求目标元素初始是display: none，如果你的“更多内容”本来就显示着，或者结构嵌套不对，就会出现要么没动画要么全隐藏的情况。
2. CSS transition + height的问题：transition: all 0.5s ease对height: auto完全无效，因为浏览器没法算出“auto”到具体值的过渡距离，自然看不到动画效果。

靠谱的实现方案（原生JS + CSS） #

我们用max-height模拟过渡，这是实现高度动画最稳妥的方式，不用依赖任何库：

1. 先搭好HTML结构

<div class="text-wrap">
  <p class="show-text">
    这里是默认展示的短文本，比如产品简介、文章摘要之类的，长度刚好适合初始展示...
  </p>
  <div class="more-content">
    <p>这里是点击「查看更多」后要显示的长内容，比如详细的功能说明、使用教程、注意事项巴拉巴拉...</p>
    <p>多写几段测试下动画效果，确保展开收起都能平滑过渡，不会出现卡顿或者跳变~</p>
  </div>
  <button class="toggle-btn">查看更多</button>
</div>

2. 核心CSS动画逻辑

.text-wrap {
  width: 450px;
  margin: 20px;
}

.more-content {
  max-height: 0; /* 初始完全隐藏 */
  overflow: hidden; /* 把超出的内容藏起来 */
  transition: max-height 0.5s ease; /* 动画过渡效果 */
  margin-top: 10px;
}

/* 展开时的样式，给个足够大的max-height（比内容实际高度大就行） */
.more-content.expanded {
  max-height: 1200px; /* 可以根据你的内容长度调整这个值 */
}

.toggle-btn {
  margin-top: 12px;
  padding: 6px 14px;
  cursor: pointer;
  border: none;
  background: #f0f0f0;
  border-radius: 4px;
}

3. 简单的JS交互逻辑

const toggleBtn = document.querySelector('.toggle-btn');
const moreContent = document.querySelector('.more-content');

toggleBtn.addEventListener('click', () => {
  // 切换展开/收起的类
  moreContent.classList.toggle('expanded');
  
  // 同步切换按钮文字
  toggleBtn.textContent = moreContent.classList.contains('expanded') ? '收起' : '查看更多';
});

额外提示：如果一定要用jQuery #

要是你习惯用jQuery，那记得让目标元素初始是display: none，然后用slideToggle()一键搞定切换，别和CSS的transition冲突就行：

$('.toggle-btn').click(function() {
  $('.more-content').slideToggle(500);
  $(this).text($(this).text() === '查看更多' ? '收起' : '查看更多');
});

这样应该就能实现你想要的滑入滑出动画啦，你可以根据自己的实际页面结构微调代码~

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