FAQs折叠面板展开时文本抖动问题求助

问题根源 #

你遇到的文本晃动，核心原因是展开面板时同时修改了max-height、padding、margin这些直接影响布局的属性——浏览器在过渡动画过程中需要反复计算元素尺寸（重排），导致文本出现跳动。另外max-height: none本身不支持CSS过渡，会让动画直接跳变，进一步加重晃动。

修复方案 #

1. 调整CSS，分离过渡与布局属性

• 给折叠内容（<p>）设置固定的基础内边距/外边距，用固定占位空间避免展开时突然改变布局。
• 只对max-height和opacity应用过渡效果，不让padding/margin参与过渡。
• 把max-height: none替换成一个足够大的具体值（比如2000px），确保容纳所有内容的同时支持过渡动画。

修改后的代码

CSS：

.faqs-section {
  width: 86.5%;
  margin-bottom: 150px;
  position: relative;
  right: -6.5%;
}

.faqs-container {
  margin: 0 auto;
}

.faqs-question {
  width: 100%;
  border: 2px solid #999;
  border-radius: 4px;
  margin-bottom: -10px;
}

.faqs-container:hover {
  color: #999;
}

.faqs-question button {
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px;
  border: none;
  outline: none;
  font-size: 24px;
  font-family: 'interstate', sans-serif;
  font-weight: 500;
  color: #300600;
  cursor: pointer;
  transition: 0.6s ease-in-out;
}

.faqs-question button h3 {
  font-size: 28px;
  font-family: 'interstate', sans-serif;
  font-weight: 500;
  transition: 0.2s ease-in-out;
  padding: 10px;
}

.faqs-question button h3:hover {
  color: #999;
  transition: 0.2s ease-in-out;
}

.faqs-question i {
  font-size: 48px;
  transition: 0.5s ease-in-out;
}

.faqs-question i:hover {
  color: #999;
  transition: 0.2s ease-in-out;
}

/* 修改折叠内容样式 */
.faqs-question p {
  font-size: 24px;
  font-family: 'Merriweather-Sans', sans-serif;
  font-weight: 300;
  line-height: 55px;
  color: #444;
  /* 固定内边距/外边距，展开时不修改 */
  padding: 10px 40px 40px 20px;
  margin: 10px 0 35px;
  /* 初始状态 */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* 仅过渡必要属性 */
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

.faqs-question p.show {
  /* 用足够大的具体值替代none，支持过渡 */
  max-height: 2000px;
  opacity: 1;
}

JS（简化逻辑）：

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const faq = button.nextElementSibling;
    faq.classList.toggle('show');
    
    const icon = button.querySelector('.bi');
    // 简化图标切换
    icon.classList.toggle('bi-plus');
    icon.classList.toggle('bi-dash');
  })
})

修复原理 #

• 固定padding/margin后，元素布局空间在展开前后不会突变，浏览器无需反复计算尺寸，消除晃动。
• max-height使用具体值后，过渡动画能平滑执行，避免跳变。
• 仅对必要属性应用过渡，减少浏览器重排压力，让动画更稳定。

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