JS修改元素样式时如何添加动画？切换display实现滑入滑出效果求助

CSS 过渡动画无法直接对display属性生效，直接切换display不会产生过渡效果，需要结合高度、透明度等支持过渡的属性实现滑入滑出效果，以下是具体实现方案：

方案一：CSS类控制（更易维护） #

第一步：添加公共CSS样式 #

/* 给需要动画的元素添加该类 */
.slide-box {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  /* 动画时长可自行调整 */
  transition: all 0.3s ease-in-out;
}
/* 展开状态类 */
.slide-box.show {
  /* 取值大于元素最大可能高度即可 */
  max-height: 1200px;
  opacity: 1;
}

第二步：修改JS逻辑 #

你原代码中两个if分支逻辑完全一致，可直接合并：

function showQuick(element, icon) {
  const isHidden = element.style.display === '' || element.style.display === 'none';
  if (isHidden) {
    element.style.display = 'block';
    // 等待浏览器完成display渲染后再添加类，避免动画失效
    requestAnimationFrame(() => {
      element.classList.add('show');
    });
    icon.style.color = '#00FFFF';
    icon.style.filter = 'drop-shadow(0 0 0.35rem #00FFFF)';
  } else {
    element.classList.remove('show');
    // 等待动画结束后再设置display:none，时长和CSS过渡时长保持一致
    setTimeout(() => {
      element.style.display = 'none';
    }, 300);
    icon.style.color = '#D2042D';
    icon.style.filter = 'drop-shadow(0 0 0.35rem #D2042D)';
  }
}

方案二：纯JS控制（无需额外CSS类） #

直接在JS中操作样式实现，适合不想修改CSS的场景：

function showQuick(element, icon) {
  const style = element.style;
  // 提前给元素设置overflow:hidden，避免内容溢出
  if (!style.overflow) style.overflow = 'hidden';
  if (!style.transition) style.transition = 'all 0.3s ease-in-out';

  const isHidden = style.display === '' || style.display === 'none';
  if (isHidden) {
    style.display = 'block';
    requestAnimationFrame(() => {
      style.maxHeight = '1200px';
      style.opacity = '1';
    });
    icon.style.color = '#00FFFF';
    icon.style.filter = 'drop-shadow(0 0 0.35rem #00FFFF)';
  } else {
    style.maxHeight = '0';
    style.opacity = '0';
    setTimeout(() => {
      style.display = 'none';
    }, 300);
    icon.style.color = '#D2042D';
    icon.style.filter = 'drop-shadow(0 0 0.35rem #D2042D)';
  }
}

注意事项 #

• max-height取值只需大于你的元素最大可能高度即可，不要设置过大，否则会影响动画速率
• JS中setTimeout的延迟时长要和CSS过渡的时长保持完全一致，避免动画还未结束元素就被隐藏
• 必须给动画元素设置overflow: hidden，否则高度变化时内容会溢出显示

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