项目中有个需求，章节下有小节，点击章节展开小节，直接展示出来体验肯定不太好，其实之前做过类似的，但是用的是translate做的，有点拉，这次尝试下transition。不多说直接贴demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 transition</title>
</head>
<style type="text/css">
.open{
height: 0;
width: 100px;
background: linear-gradient(#fff,blue,purple);
transition-property: height;
transition-duration: 0.3s;
transition-delay: 0;
transition-timing-function: linear;
}
.open.show{
height: 100px;
}
.open.hide{
height: 0;
}
</style>
<body>
<button type="button" id="btn">打开/关闭</button>
<div id="box" class="open"></div>
</body>
<script type="text/javascript">
let btn = document.getElementById('btn')
let box = document.getElementById('box')
btn.addEventListener('click',_=>{
if(box.className.includes('show')){
box.className = 'open hide'
}else{
box.className = 'open show'
}
})
</script>
</html>
