纯CSS实现滑动效果（Slide Up & Slide Down）

HTML代码

<div style="height: 200px; width: 200px; border: 1px solid #ccc;">
<div class="slider" id="slider">这里是内容</div>
</div>
<button onclick="document.getElementById('slider').classList.toggle('closed');">点击看看</button>

CSS代码

.slider {
overflow-y: hidden;
max-height: 500px;
/* 最大高度 */
background: pink;
height: 200px;
width: 200px;
/*  Webkit内核浏览器：Safari and Chrome*/
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
/*  Mozilla内核浏览器：firefox3.5+*/
-moz-transition-property: all;
-moz-transition-duration: .5s;
-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
/*  Opera*/
-o-transition-property: all;
-o-transition-duration: .5s;
-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
/*  IE9*/
-ms-transition-property: all;
-ms-transition-duration: .5s;
-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
max-height: 0;
}