vue.js 实现点击展开收起动画效果

最近公司项目加了个页面，其中要求是这样的，点击对应列表，展开和收起，其实就是显示和隐藏内容部分；说来惭愧，我花了半天时间才搞出来（自黑一下~），接下来分享给大家，先上效果图：

vue页面：

.dealRecord-wrap{margin-bottom: 100px;

  .title-contant{overflow: hidden;  

    .title{height: 84px;padding: 0 24px;border-bottom: 1px solid #eaeaea;

      h3{height: 84px;font-size: 28px;color: #333;display: flex;align-items: center;float: left;;margin-left: 10px;}

      .number{height: 84px;font-size: 24px;color: #666;display: flex;align-items: center;float: right;}

      .number i{display: inline-block;width: 23px;height: 13px;background: url('../../assets/images/icon_dropup@2x.png');background-repeat: no-repeat;background-size: 23px 13px;background-position: right 6px center;padding-right: 35px;display: flex;align-items: center; float: right;transform:rotateX(0deg);}

    }

    .contant{background: #fff;transition: height 1s;  

      ul li{padding: 0 24px;height: 142px;display: flex;align-items: center;}

      ul li:not(:last-child){border-bottom: 1px solid #f6f6f6;}
    }
  }
}
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。