js 展开折叠动画原理，jquery的toggle切换效果

效果图：

想法：

jquery的展开折叠动画效果很好看，想自己实现一个，结果发现仅仅只靠css添加类和动画是不行，最开始的思路是折叠时候设置高度为0，展开时设置高度设置为auto，让他自己撑开，可是transition并不过渡高度height为auto的动画，所以也就没有生效。

实现方法：

transition过渡高度height的时候，必须设置固定px，100%也不会生效，所以我们必须知道这块内容完全撑开的时候所占据的高度是多少。

最后发现，在原生dom节点上，scrollHeight属性就是这个节点在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。

最终代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* *{margin:0;padding:0;} *//*隐藏滚动条，不然获取高度就不一致*/.box::-webkit-scrollbar {display: none;}.box::-webkit-scrollbar {width: 0;background: 0 0;}.box{width:400px;height:0;background:#eee;overflow: hidden;}.collapse-transition {transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;}</style>
</head>
<body><button class="toggleBtn">切换</button><div class="box collapse-transition">我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看。我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看。我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看。我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看。</div>
</body>
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
$('.toggleBtn').on('click',function(){var that=$(this);var box=$('.box');let scrollHeight=box[0].scrollHeight;//不使用滚动条的情况下为了适应视口中所用内容所需的最小高度if(box.css('height')=='0px'){box.css({'height':scrollHeight+'px','overflow': 'auto'});}else{box.css({'height':'0','overflow': 'hidden'});}box.addClass('collapse-transition');
});
</script>

js 展开折叠动画原理，jquery的toggle切换效果相关推荐

android 折叠动画,Android：展开/折叠动画
Android:展开/折叠动画假设我有一个垂直linearLayout: [v1] [v2] 默认情况下,v1具有visibily = GONE. 我想用扩展动画展示v1并同时向下推v2. 我试过这 ...
通过js实现图片左右点击图片左右切换效果
通过js实现图片左右点击图片左右切换效果通过图片左右的点击实现图片的左右切换,其实先看一下代码吧() 这边HT ...
3种风吹图片jquery堆叠图片切换效果插件
dreamweaver免费视频教程: http://www.51rgb.com/mproductzh.aspx?classid=31 加讨论群390180913 入群即可参加周一至周五免费公开课并获得 ...
Android：展开/折叠动画
假设我有一个带有以下内容的垂直linearLayout: [v1] [v2] 默认情况下,v1的可见值= GONE. 我想用扩展动画显示v1并同时按下v2. 我尝试过这样的事情: Animation ...
Android自动伸展动画,android – 如何实现平滑的展开/折叠动画
我指的是在这里找到的扩展/折叠动画代码. 虽然这样做不好,动画不顺利. 我做一些登录代码. public static void expand(final View v) { v.measure(Me ...
jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )...
1.页面切换(data-transition) 地址:http://api.jquerymobile.com/data-attribute/ data-transition fade | f ...
原生JS实现移动端模块的左右滑动切换效果，基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果,基于vue.stylus 大概实现方案: 手指touch屏幕的整个过程,会派发touchstart.touchmove.touchend三个事件,对这三个事件 ...
基于jQuery实现幻灯片切换效果
效果图功能:1.幻灯片自动切换:2.点击下方小圆点切换对应幻灯片:3.点击左右两侧耳朵控制幻灯片切换至上一张或下一张:4.鼠标悬停幻灯片上时,幻灯片停止切换 <!DOCTYPE html> ...
js的判断以及图片的点击切换效果
js的判断知识 1.js中判断的几种类型 1) if( 判断条件 ){ 条件成立时,执行里面的语句条件不成立时,不执行 ...

js 展开折叠动画原理，jquery的toggle切换效果

js 展开折叠动画原理，jquery的toggle切换效果相关推荐

最新文章

热门文章