DDR爱好者之家

CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
站长资源 2024/12/29 佚名
20 1538
DDR爱好者之家 Design By 杰米

最近在做项目时，发现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端会有点瑕疵，稍微处理即可。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米