CSS3+HTML5+JS 实现一个块的收缩与展开动画效果

时间:2021-05-08

最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用displaynoneblock,或者visibilityhiddenvisible来进行控制。因此,在最近的项目中,就开始深入研究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邮箱联系删除。

相关文章