您的位置：首页 > Web前端 > JavaScript

纯JS实现slideToggle动画，慢慢下拉打开

2016-05-21 20:07 513 查看
没有存放页面的地方，借用别人的：http://www.zhangxinxu.com/study/201210/slide-transition-common-method.html

（1）CSS 设置动画时间，这是必须的

-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;

（2）JS设置 obj高度

obj.style.height
（3）通过JS计算高度
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);
}
});
demo：复杂代码保存htmL可以看效果


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" name="viewport"
content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<title>Title</title>
<style>
.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;
}
</style>
</head>
<body>

HTML代码：
<p>想看美女图片？<a href="javascript:" id="button" data-rel="more">点击我</a></p>
<div id="more" class="container">
<div class="wrap">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />
<p>我就是张含韵！</p>
<p>我就是张含韵！</p>
</div>
</div>
<script>
var slideToggleTrans = function(element, display) { //  display表示默认更多展开元素是显示状态还是隐藏
element.addEventListener("click", function() {

display = !display;

var  eleMore = document.querySelector("#more" );

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");

});

};

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

</script>

</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航