本文探讨使用原生JavaScript实现手风琴效果时遇到的过渡动画未生效问题。通过展示包含HTML结构、CSS样式及JS逻辑的完整代码，分析在动态切换显示状态时，transition属性未能正确触发的原因，并提供相关代码实现供参考。
手风琴组件过渡效果异常分析
在网页开发实践中，手风琴组件的使用场景十分常见。
笔者尝试实现了一个基础的手风琴功能，但发现其过渡动画并未生效，导致内容列表的展开显得生硬突兀。具体效果可参考下图：
实现该功能的核心代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手风琴</title>
<style>
body,
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.nav {
width: 150px;
height: 310px;
margin-top: 30px;
margin-left: 50px;
font-size: 20px;
border: 1px solid #ccc;
}
.nav>ul>li:nth-child(2n+1) {
background-color: cadetblue;
}
.nav>ul>li:nth-child(2n+2) {
height: 160px;
display: none;
transition: all 1s;
}
.nav>ul>#selected {
background-color: rgb(46, 115, 117);
}
.nav>ul>li:nth-child(2) {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li id="selected">标题1</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题2</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题3</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题4</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题5</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题6</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</div>
<script>
var title = document.querySelectorAll(".nav>ul>li:nth-child(2n+1)");
for (var i = 0; i < title.length; i++) {
title[i].onmouseover = function () {
for (var j = 0; j < title.length; j++) {
title[j].nextElementSibling.style.display = "none";
title[j].id = "";
}
this.id = "selected";
this.nextElementSibling.style.display = "block";
}
}
</script>
</body>
</html>代码中已添加过渡属性设置：transition: all 1s;，然而该设置并未产生预期效果，对此现象存在疑问。
以上内容为本文的全部分享，希望能为读者的学习提供有益参考，同时也感谢大家的支持。