zoukankan      html  css  js  c++  java
  • CSS3+HTML5+JS 实现一个块的收缩&展开动画

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

    简单的一个效果图

     

    实现思路

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

    (1)标题块: 展示标题和一个带有收缩&展开动画效果的图标

      ①图标部分,我们可以使用伪类来绘画出箭头,并且使用 transform 的旋转属性 rotate 进行图标的方向控制和其动画效果

      ②动画控制,通常点击标题部分,列表则收缩&展开,因此点击标题时,要对class进行控制。

    (2)内容块:内容块展示内容,且该块承载了主要的动画效果——列表的收缩&展开

      ①动画效果:该块的动画,我们的思路是整个块的高度收起来,里面的内容也向左边隐藏,因此需要控制高度和动画的隐藏,所以使用 max-height 进行高度控制和 transition(设置动画时间)、transform 的属性 translate 来进行内容的隐藏

    完整代码如下:

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <title></title>
      5     <style type="text/css">
      6         .block_wrap {
      7              500px;
      8             margin: 0 auto;
      9             border: 1px solid #e3e3e3;
     10             border-radius: 10px;
     11         }
     12         .chapter_wrap {
     13             background: white;
     14             text-align: left;
     15             border-radius: 8px;
     16             color: #333333;
     17             margin-bottom: 15px;
     18             font-size: 14px;
     19             overflow: hidden;
     20         }
     21         .title_item_wrap {
     22             padding: 10px 10px 10px 0;
     23             margin: 0 10px 0 10px;
     24             border-bottom: none;
     25             display: flex;
     26             align-items: center;
     27         }
     28         /*使用伪类进行图标绘画*/
     29         .title_item_wrap::after {
     30             content: '';
     31              10px;
     32             height: 10px;
     33             border-top: 2px solid #999999;
     34             border-right: 2px solid #999999;
     35             transform: rotate(-45deg);
     36             display: inline-block;
     37             transition: 0.3s;
     38             float: right;
     39             margin-top: 10px;
     40         }
     41         /*使用类acitve类控制图标的旋转和展开时标题的下边界*/
     42         .active {
     43             border-bottom: 1px solid #F0F0F0;
     44         }
     45         .active::after{
     46             transform: rotate(135deg);
     47             margin-top: 5px;
     48         }
     49         .chapter_title {
     50             font-size: 16px;
     51             padding: 0;
     52             margin: 0;
     53              calc(100% - 30px);
     54         }
     55         .node_wrap {
     56             overflow: hidden;
     57             overflow-y: scroll;
     58             transition: 0.3s;
     59         }
     60         .node_wrap p {
     61             padding: 0 20px 5px 20px;
     62             margin: 10px 0;
     63             border-bottom: 1px solid #e3e3e3
     64         }
     65         /*隐藏内容块的滑动条*/
     66         .node_wrap::-webkit-scrollbar {
     67             display: none;
     68         }
     69         /*控制内容块隐藏 隐藏时,整块向左边平移200%的宽度,并且将最大高度设置为0,否则页面会留有空白*/
     70         .node_wrap_hide {
     71             transform: translate(-200%, 0);
     72             max-height: 0;
     73         }
     74         /*控制内容块显示,显示时,整块向右边复原,并且将最大高度设置为300px,里面的内容即会将块撑开*/
     75         .node_wrap_show {
     76             transform: translate(0, 0);
     77             max-height: 300px;
     78         }
     79     </style>
     80 </head>
     81 <body>
     82     <div class="block_wrap">
     83         <div id="block_wrap" class="title_item_wrap active">
     84             <p class="chapter_title">章节名称</p>
     85         </div>
     86         <div id="list_wrap" class="node_wrap node_wrap_show">
     87             <p>节名称一</p>
     88             <p>节名称二</p>
     89             <p>节名称三</p>
     90             <p>节名称四</p>
     91             <p>节名称五</p>
     92             <p>节名称六</p>
     93             <p>节名称七</p>
     94             <p>节名称八</p>
     95             <p>节名称九</p>
     96             <p>节名称十</p>
     97         </div>
     98     </div>
     99 </body>
    100 <script type="text/javascript">
    101     // 获取标题元素
    102     var block_wrap = document.getElementById('block_wrap')
    103 
    104     //给标题元素添加点击事件,通过点击控制class的添加&去除达成动画效果
    105     block_wrap.onclick = function() {
    106         // 获取标题元素className集合
    107         let classArray = this.className.split(/s+/)
    108 
    109         // 获取内容块元素
    110         let list_wrap = document.getElementById('list_wrap')
    111 
    112         // 判断标题元素是否有类active,如若存在,则说明列表展开,这时点击则是隐藏内容块,否则显示内容块
    113         if (classArray.includes('active')) {
    114             // 隐藏内容块
    115             block_wrap.classList.remove('active')
    116             list_wrap.classList.remove('node_wrap_show')
    117             list_wrap.classList.add('node_wrap_hide')
    118             console.log(this.className.split(/s+/))
    119             return
    120         } else {
    121             // 显示内容块
    122             block_wrap.classList.add('active')
    123             list_wrap.classList.add('node_wrap_show')
    124             list_wrap.classList.remove('node_wrap_hide')
    125             return
    126         }
    127     }
    128 </script>
    129 </html>

    以上代码直接复制到HTML文件保存后即可看到效果。此动画效果适应移动端,PC端会有点瑕疵,稍微处理即可。

  • 相关阅读:
    SP笔记:交叉实现七行并成一行
    HTML tag 学习
    操作哈希表
    Efficient bipedal robots based on passivedynamic walkers
    Pushing People Around
    ZEROMOMENT PONTTHIRTY FIVE YEARS OF ITS LIFE

    Active Learning for RealTime Motion Controllers
    Accelerometerbased User Interfaces for the Control of a Physically Simulated Character
    Dynamic Response for Motion Capture Animation
  • 原文地址:https://www.cnblogs.com/zhichong/p/13546190.html
Copyright © 2011-2022 走看看