微信小程序-时间轴/抽屉展开收起特效

微信小程序项目中用到的时间轴展示和抽屉展开收起特效
本篇内容为原创，转载请注明出处。
一、效果图
默认为展开状态  ---  左：展开；右：收起


二、代码片段：

1、wxml部分

  我是标题
    
    
    
    
      {{'<'}}
    
  
  
    
      
        
           
        
        {{item.startTime}}
      
      
        
           
        
        
          {{item.experience}}
          
        
      
    
  
 


 我的存在就是为了测测上面收起的效果，嗯就是这样

2、js部分：
 

Page({
  data: {
    showUp:false,
    dataList:[
      {
        startTime:'2020年3月',
        experience:'苦逼的写代码'
      },
      {
        startTime:'2020年4月',
        experience:'依然苦逼的写代码'
      },
      {
        startTime:'2020年5月',
        experience:'仍然苦逼的写代码'
      },
      {
        startTime:'2020年6月',
        experience:'好吧，继续写代码'
      }
    ]
  },
  
  changeUpDown:function(e){
    this.setData({
      showUp:!this.data.showUp
    })
  }
})

3、wxss部分
 

.card {
  padding: 20rpx;
}
.cardTitle {
  padding: 10rpx;
}
.ivestment-c{
  position: relative;
  box-sizing:border-box;
  background-color: #fff;
  padding: 20rpx 0;
  width: 100%;
  max-height: 500px;
  overflow-y: auto;
  height: auto;
}
.ivestment-i{
  position: relative;  
}


.invest-l{
  width: 100%;  
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;  
  position: relative;
}

.demo-flex-1{
  flex:1;
  margin-left: 40rpx;
}
.invest-b{
  position: absolute;
  top:0;
  left: 0;
  width: 40rpx;
  height: 100%;
  text-align: center;
}
.invest-line::before{
  position: absolute;
  display: inline-block;
  top:50%;
  left: 50%;
  content: " ";
  margin-top: -9rpx;
  margin-left: -9rpx;
  width:18rpx;
  height:18rpx;
  background:#398af4;
  border-radius:50%;
  z-index: 10;
}
.invest-line::after{
  position: absolute;
  display: inline-block;
  top: 0;
  left: 50%;
  content: " ";
  margin-left: -1rpx;
  width: 2rpx;
  height: 100%;
  background-color: #398af4;
  z-index: 5;
}
.invest-line2::after{
  position: absolute;
  display: inline-block;
  top: 0;
  left: 50%;
  content: " ";  
  width: 2rpx;
  margin-left: -1rpx;
  height: 100%;
  background-color: #398af4;
  z-index: 5;
}
.ivestment-i:nth-child(1) .invest-line::after{
  top: 36rpx;
}
.showBox {
  transition: all .6s ease;
  height: auto;
  max-height: 500px;
  overflow-y: auto;
}
.hideBox {
  transition: all .6s ease;
  height: 0;
  padding: 0;
}
.textBox {
  width: 20px;
  height: 20px;
  float: right;
}
.rotateUp {
  transition: all .6s ease;
  transform:rotate(0deg);
}
.rotateDown {
  transition: all .6s ease;
  transform:rotate(180deg);
}
.rotateUp1 {
  transition: all .6s ease;
  transform:rotate(90deg);
}
.rotateDown1 {
  transition: all .6s ease;
  transform:rotate(270deg);
}

三、代码地址：
https://github.com/Jianing666/wx-timeaxis-drawer