为Div的显示/隐藏功能添加过渡动画效果遇阻求助

你的动画不生效主要有两个核心问题：

1. 事件逻辑冲突：按钮同时绑定了onclick（myFunction里修改display）和addEventListener（切换hide类修改opacity），点击时两个逻辑同时执行，状态混乱，动画自然无法正常触发。
2. display:none破坏过渡：display:none会让元素瞬间脱离文档流，浏览器不会为它执行任何过渡动画，元素直接消失。

修复方案 #

我们统一用类切换的方式实现，结合opacity和max-height实现平滑展开/收起，同时避开display的问题：

修改后的完整代码

<div id="one">
  This is an element.
</div>

<button id="but">Close</button>

#one {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
  opacity: 1;
  max-height: 200px; /* 设置足够大的值覆盖元素展开高度 */
  transition: opacity 0.5s linear, max-height 0.5s ease, padding 0.5s ease, margin-top 0.5s ease;
  overflow: hidden; /* 隐藏超出max-height的内容 */
}

#one.hide {
  opacity: 0;
  max-height: 0;
  padding: 0; /* 收起时去掉内边距避免留白 */
  margin-top: 0; /* 收起时去掉外边距优化视觉 */
}

const x = document.getElementById("one");
const btn = document.getElementById("but");

btn.addEventListener('click', function() {
  x.classList.toggle('hide');
  // 同步切换按钮文字
  btn.textContent = x.classList.contains('hide') ? 'Open' : 'Close';
});

关键说明 #

• 移除了onclick属性，只保留addEventListener逻辑，避免冲突。
• 用max-height替代display：元素收起时将max-height设为0，配合overflow:hidden隐藏内容，同时保留过渡动画；展开时设为足够大的值（可根据实际内容调整）。
• 同步过渡padding和margin-top，让收起时的留白也平滑消失，视觉效果更自然。

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