如何通过内联JavaScript修改style为div添加显示隐藏过渡效果？

你遇到的问题很常见——display属性是无法被CSS过渡动画处理的，浏览器没办法在none和block之间生成中间帧，所以你之前尝试的transition: display ...完全不会生效。要实现平滑的淡入淡出，我们需要改用**opacity（透明度）和visibility（可见性）**这两个支持过渡的属性，配合CSS类切换来实现。

下面是完整的修改方案：

1. 调整CSS样式 #

首先修改你的CSS，给目标div添加过渡效果，并通过类来控制显示状态：

body{
 font-family: "IBM Plex Sans", sans-serif;
}
.accordion {
 cursor: pointer;
 border: none;
 text-align: center;
 outline: none;
 font-size: 15px;
 padding-left:100px;
 padding-right:100px;
 padding-top: 20px;
 width: 80px;
}
.accordion:hover {
 opacity: 0.7;
}
.accordion img {
 width: 50px;
 margin: 0 auto;
}
.all_divs > div {
 color: #232f3e;
 width: 95%;
 text-align: center;
 background-color:#fafafa;
 position: absolute;
 padding:2%;
 border-top: 2px solid #e6e7e8;
 /* 添加过渡属性 */
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
/* 控制显示的active类 */
.all_divs > div.active {
 opacity: 1;
 visibility: visible;
}
h1{
 font-weight: lighter;
 color: #232f3e;
}
td{
 padding: 2%;
}

• opacity: 0让元素完全透明，visibility: hidden让元素不可交互（同时屏幕阅读器也会忽略它）
• transition属性定义了透明度和可见性的过渡时长与动画曲线，这里用了0.3秒的缓入缓出
• .active类用来触发显示状态，把透明度设为1，可见性设为visible

2. 修改JavaScript代码 #

去掉原来直接操作display的逻辑，改用添加/移除active类来控制过渡：

const divs = ['Core1', 'Core2', 'Core3']; // 明确声明div数组
var visibleDivId = null;

function divVisibility(divId) {
 if(visibleDivId === divId) {
  // 点击当前显示的div，隐藏它
  visibleDivId = null;
 } else {
  // 点击新的div，切换显示目标
  visibleDivId = divId;
 }
 hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
 var i, divId, div;
 for(i = 0; i < divs.length; i++) {
  divId = divs[i];
  const respoding_div = document.getElementById(divId);
  if(visibleDivId === divId) {
   // 显示目标div：添加active类
   respoding_div.classList.add('active');
  } else {
   // 隐藏其他div：移除active类
   respoding_div.classList.remove('active');
  }
 }
}

3. 调整HTML结构 #

移除div上的style="display:none;"，因为我们已经通过CSS默认隐藏了它们：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="text-align:center; margin:0 auto;">
 <div class="card-container" style="margin:0 auto; width:50%; display: flex; align-items: center; justify-content: center; padding-bottom:10px;">
 <div class='accordion' onclick="divVisibility('Core1');">
 <img src='https://img.icons8.com/dotty/2x/external-link-squared.png' width="50px">Button-1
 </div>
 <div class='accordion' onclick="divVisibility('Core2');">
 <img src='https://img.icons8.com/dotty/2x/globe-earth.png' width="50px">Button-2
 </div>
 <div class='accordion' onclick="divVisibility('Core3');">
 <img src='https://img.icons8.com/dotty/2x/torrent.png' width="50px">Button-3
 </div>
 </div>
 <div class="all_divs">
 <div id="Core1" class="subdiv">TEXT #1</div>
 <div id="Core2" class="subdiv">TEXT #2</div>
 <div id="Core3" class="subdiv">TEXT #3</div>
 </div>
 </div>
</div>
</body>
</html>

效果说明 #

现在点击按钮时：

• 新的目标div会平滑淡入（opacity从0到1，visibility从hidden到visible）
• 之前显示的div会平滑淡出（opacity从1到0，visibility从visible到hidden）
• 因为所有div都是绝对定位重叠的，所以淡入淡出会同时进行，视觉效果流畅

如果想要优化性能（比如完全隐藏不参与布局的div），可以监听过渡结束事件，在淡出完成后设置display: none，不过对于这个场景来说，上面的方案已经足够简洁好用了。

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