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


Posted in HTML / CSS onNovember 17, 2020

最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hidden 和 visible 来进行控制。因此,在最近的项目中,就开始深入研究CSS3关于动画的技术,并且运用到了项目中,下面是关于列表块的收缩&展开动画。

简单的一个效果图

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

实现思路

大体上我们将列表块分割成 标题块 和 内容块

(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;
       }
        /*使用类acitve类控制图标的旋转和展开时标题的下边界*/
        .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;
        }
        /*控制内容块隐藏 隐藏时,整块向左边平移200%的宽度,并且将最大高度设置为0,否则页面会留有空白*/
        .node_wrap_hide {
             transform: translate(-200%, 0);
             max-height: 0;
        }
        /*控制内容块显示,显示时,整块向右边复原,并且将最大高度设置为300px,里面的内容即会将块撑开*/
        .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展开收缩动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 #HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 #HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 #HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 #HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 #HTML / CSS
CSS3 文字动画效果
Nov 12 #HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 #HTML / CSS
You might like
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
javascript常用的设计模式
2017/02/09 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
Vue异步加载about组件
2017/10/31 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
如何通过python实现全排列
2020/02/11 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
初一家长会邀请函
2014/01/31 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
流动人口婚育证明
2014/10/19 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android