先上效果图：
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由慢到快在到慢。
