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 .wrap {
    border: 20px solid #333;
}
:root .container .wrap {
    /* 正统slide效果 */
    position: absolute;
    bottom: 0;
}
                

HTML代码：

<p>想看美女图片？<a href="javascript:" id="button" data-rel="more">点击我</a></p>
<div id="more" class="container">
    <div class="wrap">
        <img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />
        <p>我就是张含韵！</p>
    </div>
</div>
                

JS代码：

var slideToggleTrans = function(element, display) { //  display表示默认更多展开元素是显示状态还是隐藏
    if (typeof window.screenX === "number") {
        // 现代浏览器
        element.addEventListener("click", function() {
            display = !display;
            var rel = this.getAttribute("data-rel"), eleMore = document.querySelector("#" + rel);    

            eleMore && (eleMore.style.height = display? (function() {
                var height = 0;
                Array.prototype.slice.call(eleMore.childNodes).forEach(function(child) {
                    if (child.nodeType === 1) {
                        var oStyle = window.getComputedStyle(child);
                        height = child.clientHeight + (parseInt(oStyle.borderTopWidth) || 0) + (parseInt(oStyle.borderBottomWidth) || 0);
                    }
                });    
                return height;
            })() + "px": "0px");

        });
    } else {
        // IE6-IE8浏览器
        element.attachEvent("onclick", function() {    
            display = !display;
            var rel = element.getAttribute("data-rel"), eleMore = document.getElementById(rel);
            eleMore && (eleMore.style.height = display? "auto": "0px");
            return false;
        });
    }
};

// 应用渐进使用transition交互的slideToggle效果
slideToggleTrans(document.getElementById("button"));