时间:2021-05-08
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用display的none和block,或者visibility的hidden和visible来进行控制。因此,在最近的项目中,就开始深入研究CSS3关于动画的技术,并且运用到了项目中,下面是关于列表块的收缩&展开动画。
简单的一个效果图
实现思路
大体上我们将列表块分割成标题块和内容块
(1)标题块:展示标题和一个带有收缩&展开动画效果的图标
①图标部分,我们可以使用伪类来绘画出箭头,并且使用transform的旋转属性rotate进行图标的方向控制和其动画效果。
②动画控制,通常点击标题部分,列表则收缩&展开,因此点击标题时,要对class进行控制。
(2)内容块:内容块展示内容,且该块承载了主要的动画效果——列表的收缩&展开
①动画效果:该块的动画,我们的思路是整个块的高度收起来,里面的内容也向左边隐藏,因此需要控制高度和动画的隐藏,所以使用max-height进行高度控制和transition(设置动画时间)、transform 的属性translate来进行内容的隐藏
完整代码如下:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .block_wrap { width: 500px; margin: 0 auto; border: 1px solid #e3e3e3; border-radius: 10px; } .chapter_wrap { background: white; text-align: left; border-radius: 8px; color: #333333; margin-bottom: 15px; font-size: 14px; overflow: hidden; } .title_item_wrap { padding: 10px 10px 10px 0; margin: 0 10px 0 10px; border-bottom: none; display: flex; align-items: center; } .title_item_wrap::after { content: ''; width: 10px; height: 10px; border-top: 2px solid #999999; border-right: 2px solid #999999; transform: rotate(-45deg); display: inline-block; transition: 0.3s; float: right; margin-top: 10px; } .active { border-bottom: 1px solid #F0F0F0; } .active::after{ transform: rotate(135deg); margin-top: 5px; } .chapter_title { font-size: 16px; padding: 0; margin: 0; width: calc(100% - 30px); } .node_wrap { overflow: hidden; overflow-y: scroll; transition: 0.3s; } .node_wrap p { padding: 0 20px 5px 20px; margin: 10px 0; border-bottom: 1px solid #e3e3e3 } .node_wrap::-webkit-scrollbar { display: none; } .node_wrap_hide { transform: translate(-200%, 0); max-height: 0; } .node_wrap_show { transform: translate(0, 0); max-height: 300px; } </style> </head> <body> <div class="block_wrap"> <div id="block_wrap" class="title_item_wrap active"> <p class="chapter_title">章节名称</p> </div> <div id="list_wrap" class="node_wrap node_wrap_show"> <p>节名称一</p> <p>节名称二</p> <p>节名称三</p> <p>节名称四</p> <p>节名称五</p> <p>节名称六</p> <p>节名称七</p> <p>节名称八</p> <p>节名称九</p> <p>节名称十</p> </div> </div> </body> <script type="text/javascript"> // 获取标题元素 var block_wrap = document.getElementById('block_wrap') //给标题元素添加点击事件,通过点击控制class的添加&去除达成动画效果 block_wrap.onclick = function() { // 获取标题元素className集合 let classArray = this.className.split(/\s+/) // 获取内容块元素 let list_wrap = document.getElementById('list_wrap') // 判断标题元素是否有类active,如若存在,则说明列表展开,这时点击则是隐藏内容块,否则显示内容块 if (classArray.includes('active')) { // 隐藏内容块 block_wrap.classList.remove('active') list_wrap.classList.remove('node_wrap_show') list_wrap.classList.add('node_wrap_hide') console.log(this.className.split(/\s+/)) return } else { // 显示内容块 block_wrap.classList.add('active') list_wrap.classList.add('node_wrap_show') list_wrap.classList.remove('node_wrap_hide') return } } </script> </html>以上代码直接复制到HTML文件保存后即可看到效果。此动画效果适应移动端,PC端会有点瑕疵,稍微处理即可。
到此这篇关于CSS3+HTML5+JS 实现一个块的收缩与展开动画效果的文章就介绍到这了,更多相关html5展开收缩动画内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。循环列表,html:{{item.content}}【展开】【收缩】在
方法一:html5配合css3实现带提示文字的输入框(摆脱js);webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以
用css3动画实现的一个简单炫酷效果,最终的效果图如下:页面结构(index.html):DocumentRelaxAndBreathscript.js:con
本文实例讲述了jquery简单实现网页层的展开与收缩效果。分享给大家供大家参考。具体如下:这里演示了jquery网页层展开、层收缩代码,带缓冲动画效果,点击指定
本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下说明:点击”+“按钮,悬浮窗收缩/展开思路1、在html中定义一个div块,定一个id;一