展开与折叠菜单动画

最简单的展开与折叠菜单，一般是通过切换display属性的none和block的值来实现。但是这样会使得整个过程非常的生硬，内容是一瞬间展示给用户，交互过程感觉不是特别好。我们加上动画以后让整个过程更加柔和。

下面通过css动画进行一个展开折叠的操作

css

.container{
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 0;
    transition: height .6s;   
}
.content{
    background: red;
}

html

<div id="div">展开</div>
<div class="container">
    <div class="content" style="height: 100px;"></div>
</div>

js

let isShow = false
const toggle = document.querySelector("#div")
toggle.onclick = function(){
    isShow = !isShow
    div.innerText = isShow ? "折叠" : "展开"
    document.querySelector(".container").style.height =  isShow ? "100px" : "0"
}

效果图

隐藏 显示