点击按钮后为显示的div标签添加动画效果的实现方法

直接修改display属性没法触发动画——因为display: none会让元素瞬间脱离文档流，过渡或动画根本没机会执行。下面给你两种基于现有代码改造的实现方式，都是通过类切换配合CSS来实现动画：

方案一：淡入+展开的过渡效果 #

这种方式用CSS Transition实现平滑的淡入和高度展开动画，修改量很小：

修改后的JS代码 #

function toggle_div_fun(id) { 
  var divelement = document.getElementById(id); 
  // 用类切换代替直接修改display
  divelement.classList.toggle('show');
}

添加CSS样式 #

#sectiontohide {
  /* 默认保持display:flex，用其他属性控制隐藏 */
  display: flex;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  /* 设置过渡动画的属性和时长，可按需调整 */
  transition: opacity 0.3s ease, max-height 0.5s ease;
}

/* 显示状态的样式 */
#sectiontohide.show {
  opacity: 1;
  /* 设置一个足够容纳div内容的max-height值 */
  max-height: 500px;
}

说明：用max-height而不是height是因为height: auto无法触发过渡动画，设置一个足够大的max-height就能模拟内容展开的效果；opacity负责淡入，两个过渡时长可以分开调整，让动画更自然。

方案二：自定义滑入动画 #

如果想要更生动的效果，比如从上方滑入，可以用CSS关键帧动画：

JS代码和方案一一致 #

function toggle_div_fun(id) { 
  var divelement = document.getElementById(id); 
  divelement.classList.toggle('show');
}

对应的CSS样式 #

#sectiontohide {
  display: flex;
  opacity: 0;
  /* 初始位置向上偏移20px */
  transform: translateY(-20px);
  overflow: hidden;
  /* 过渡动画配置 */
  transition: all 0.3s ease;
}

#sectiontohide.show {
  opacity: 1;
  /* 回到原位置 */
  transform: translateY(0);
}

/* 或者用@keyframes定义更复杂的动画序列 */
/* @keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#sectiontohide.show {
  animation: slideIn 0.3s ease forwards;
} */

说明：两种写法都可行——直接用transition控制transform和opacity，或者用@keyframes定义完整的动画流程。forwards关键字可以让动画结束后保持最终状态，不用额外维护样式。

注意事项 #

• 不要用display: none来隐藏元素，否则动画会被中断；始终保持display: flex，用opacity、max-height、transform这些属性控制可见性，动画才能正常触发。
• 如果需要元素完全不占空间（隐藏时），max-height: 0+overflow: hidden已经能实现这个效果，不需要额外修改display。

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