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

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

简单的一个效果图

实现思路

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

（1）标题块： 展示标题和一个带有收缩&展开动画效果的图标

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

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

（2）内容块：内容块展示内容，且该块承载了主要的动画效果——列表的收缩&展开

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

完整代码如下：

   
   


    .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;
}
    
 
 
    
 
     
章节名称
 
 
      
节名称一
     
节名称二
    
节名称三
    
节名称四
      
节名称五
     
节名称六
     
节名称七
      
节名称八
      
节名称九
     
节名称十

     
 
 
 

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

到此这篇关于CSS3+HTML5+JS 实现一个块的收缩与展开动画效果的文章就介绍到这了,更多相关html5展开收缩动画内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！