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特性绘制简易版围棋效果
Sep 28 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP 读取和编写 XML
2014/11/19 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
Python内置函数 next的具体使用方法
2017/11/24 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Python 实现微信防撤回功能
2019/04/29 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
毕业自我鉴定范文
2013/11/06 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP