微信小程序 列表展开动画 手风琴动画

WXML

<view class='info-container'>
  <view class='one-container'>
    <block wx:for="{{info}}" wx:key="key" wx:for-item="item" wx:for-index="index">
      <view class='one-text' animation="{{animationInfoData[index]}}" wx:if="{{infoShow[index]}}">
        <text class='one-left'>{{item.title}}</text>
        <text class='one-right'>{{item.detail}}</text>
      </view>
    </block>
  </view>
</view>

WXSS

page {
  background-color: #efefef;
}

.info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.one-container {
  margin-top: 50rpx;
  width: 100%;
}

.one-text {
  background-color: white;
  border-bottom: 1rpx solid #eee;
  height: 80rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 50rpx;
  padding-right: 50rpx;
}

.one-left {
  display: flex;
  width: 150rpx;
  font-size: 30rpx;
  font-weight: 500;
}

.one-right {
  display: flex;
  width: 100%;
  font-size: 28rpx;
  color: #333;
}

JS

Page({

  /**
   * 页面的初始数据
   */
  data: {
    info: [{
        'title': '部门',
        'detail': '技术部'
      },
      {
        'title': '职位',
        'detail': 'PHP工程师'
      },
      {
        'title': '网站',
        'detail': 'BLOG.LIUGUOFENG.COM'
      },

      {
        'title': '测试',
        'detail': '测试'
      },

      {
        'title': '测试',
        'detail': '测试'
      },

      {
        'title': '测试',
        'detail': '测试'
      },

      {
        'title': '测试',
        'detail': '测试'
      },

      {
        'title': '测试',
        'detail': '测试'
      },

      {
        'title': '测试',
        'detail': '测试'
      },

      {
        'title': '测试',
        'detail': '测试'
      },

      {
        'title': '测试',
        'detail': '测试'
      },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.fadeInInfo()
  },

  fadeOutInfo: function() {
    var that = this
    that.setData({
      infoShow: []
    })
  },

  fadeInInfo: function(callback = function() {}) {
    var that = this
    console.log('fadeInInfo 开始')

    var info = this.data.info
    var key

    var animationInfoData = []
    var infoShow = []
    for (key in info) {
      var animation = wx.createAnimation({
        duration: 0,
        timingFunction: 'step-start',
      })
      animation.opacity(0).scale(0.8, 0.8).step()
      animationInfoData[key] = animation.export()
      infoShow[key] = true
    }
    that.setData({
      animationInfoData: animationInfoData
    }, function() {
      that.setData({
        infoShow: infoShow
      })

      for (key in info) {
        var time = 100 * key
        var animation = wx.createAnimation({
          duration: 500,
          timingFunction: 'ease',
          delay: time
        })
        animation.opacity(1).scale(1, 1).step()
        animationInfoData[key] = animation.export()
      }
      setTimeout(function() {
        that.setData({
          animationInfoData: animationInfoData
        })
      }, 20)
    })
  },
})