CSS3 transition实现与收起的正统slide效果演示实例页面

CSS代码：

.box {
    width: 400px; padding: 15px;  background-color: #f0f3f9;
}
.container {
    height: 0; position: relative;  overflow: hidden;
    -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    -o-transition: height 0.6s;
    transition: height 0.6s;
}
.container img {  
    position: absolute;  bottom: 0;
}
                

HTML代码：

<p>想看美女图片？<a href="javascript:" id="button">点击我</a></p>
<div id="more" class="container">
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />
</div>
                

JS代码：

(function() {
    var eleBtn = document.getElementById("button"),
        eleMore = document.getElementById("more");
    
    var display = false;
    
    eleBtn.onclick = function() {
        display = !display;
        eleMore.style.height = display? "192px": "0px"
        return false;
    };
})();