小程序-折叠展开列表

先上效果图：

rotate.gif

subordinate.js:

  /**
   * 页面的初始数据
   */
  data: {
    degs: 0,
    degss: 0,
    degsss: 0,
    subords: [
      { name: '张三', pay: '300.00' },
      { name: '李四', pay: '400.00' },
      { name: 'Marry', pay: '200.00' },
      { name: '龙霸天', pay: '300.00' },
    ]
  },

  /**
   * 折叠展开动画
   */
  rotateAnim: function () {
    let deg = this.data.degs;
    deg = deg == 0 ? 90 : 0;
    this.setData({
      degs: deg
    })
  },

subordinate.wxml:

<import src='/template/subordinate/subordinate.wxml' />
<view class='title' catchtap='rotateAnim'>
  <text>一级直属下级</text>
  <view style='transform:rotate({{degs}}deg);transition:all 0.4s;'></view>
</view>
<view hidden='{{degs==0}}'>
  <block wx:for="{{subords}}">
    <template is='subordinate' data='{{...item}}'></template>
  </block>
</view>

subordinate.wxss:

@import '/template/subordinate/subordinate.wxss';

.title {
  padding: 20rpx 30rpx;
  font-size: 12pt;
  color: #353535;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
}

.title view::after {
  display: inline-block;
  content: '';
  width: 18rpx;
  height: 18rpx;
  border-top: 3rpx solid #353535;
  border-right: 3rpx solid #353535;
  transform: rotate(45deg);
}

涉及到的知识点：CSS3 transform+transition

transform的属性包括：rotate() / skew() / scale() / translate() / matrix()

transiton属性是下面几个属性的缩写：
transition-property
指定过渡的属性值，比如transition-property:opacity就是只指定opacity属性参与这个过渡。
transition-duration
指定这个过渡的持续时间
transition-delay
延迟过渡时间
transition-timing-function
指定过渡动画缓动类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
其中，linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。