先上效果圖：

rotate.gif

subordinate.js:

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  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' },
    ]
  },

  /**
   * 折疊展開動(dòng)畫
   */
  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>一級(jí)直屬下級(jí)</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);
}

涉及到的知識(shí)點(diǎn)：CSS3 transform+transition

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

transiton屬性是下面幾個(gè)屬性的縮寫：
transition-property
指定過渡的屬性值，比如transition-property:opacity就是只指定opacity屬性參與這個(gè)過渡。
transition-duration
指定這個(gè)過渡的持續(xù)時(shí)間
transition-delay
延遲過渡時(shí)間
transition-timing-function
指定過渡動(dòng)畫緩動(dòng)類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
其中，linear線性過度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。