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

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


二、代码片段：

1、wxml部分

<view class="card">
  <view class="cardTitle" bindtap="changeUpDown">我是标题
    <!-- 项目里面用的是iconfont标签-箭头 -->
    <text class="iconfont icon-down {{showUp?'rotateUp':'rotateDown'}}"></text>
    <!-- 这里为了方便看，使用了< 小于号 -->
    <view class="textBox {{showUp?'rotateUp1':'rotateDown1'}}">
      <text>{{'<'}}</text>
    </view>
  </view>
  <view class="ivestment-c {{showUp?'hideBox':'showBox'}}">
    <view class="ivestment-i" wx:for="{{dataList}}" wx:key="index" wx:for-item="item" wx:for-index="index">
      <view class="invest-l">
        <view class="invest-b invest-line">
          <text decode="{{true}}" space="{{true}}">&nbsp;</text>
        </view>
        <view class="demo-flex-1 font-28r color-3" style="line-height: 64rpx;">{{item.startTime}}</view>
      </view>
      <view class="invest-l">
        <view class="invest-b invest-line2">
          <text decode="{{true}}" space="{{true}}">&nbsp;</text>
        </view>
        <view class="demo-flex-1">
          <view class="font-12 color-6 awardUnit" style="line-height: 52rpx;margin-top: 16rpx;margin-bottom: 16rpx;">{{item.experience}}
          </view>
        </view>
      </view>
    </view>
  </view>
 
</view>
<view class="card">
 我的存在就是为了测测上面收起的效果，嗯就是这样
</view>

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