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

没有存放页面的地方，借用别人的：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>

纯JS实现slideToggle动画，慢慢下拉打开相关推荐

纯JS实现省市县三级下拉联动
纯JS实现省市县三级下拉联动代码如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
html鼠标点击有手势出来,用原生js+css3撸的一个下拉手势事件插件
; (function () { var DropDown = function (dropId = 'dropDwon', distance = 60, callBack = () => {} ...
html中通过定位实现下拉,JS+CSS相对定位实现的下拉菜单
本文实例讲述了JS+CSS相对定位实现的下拉菜单.分享给大家供大家参考.具体如下: 这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰. 运行效果截图 ...
js插件chosen-select后台交互下拉框选择
js插件chosen-select后台交互下拉框选择 $('.chosen-select').chosen(); $(".chosen-search input").bind(&q ...
html 下拉列表模糊查询,JS实现模糊查询带下拉匹配效果
"搜索"可以使我们更快的找到某一个关键词或者某一个商品,所以"模糊查询"和"下拉匹配"也成了前端必备的一个小技能,开门见山,希望对朋友们有帮 ...
html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单
个人信息维护学生信息修改修改密码--%> 修改密码--%> 修改密码--%> 退出登录用户: 所在班级: js文件 //个人信息维护下拉菜单样式 $(function () { ...
jquery+原生js模拟淘宝输入框下拉提示
1.概述: 模拟淘宝.百度的搜索框,当用户输入时,会自动下拉提示关键字,使用组件jquery.js(1.12.1),jquery-ui.js(1.12.1).jquery-ui.css(1.12.1) ...
vusjs 配合php_对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据
上篇文章介绍了vue.js如何ajax获取数据: 接着不可避免就遇到的是: 如何进行数据分页呢? 这里以thinkphp为示例讲解:其他场景性质一样: 示例项目:https://github.com/ ...

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

纯JS实现slideToggle动画，慢慢下拉打开相关推荐

最新文章

热门文章