微信小程序实现点击滑动展开效果动画

js

let animationShowHeight = 300;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    animation: ''
  },
  // 下来
  btnClick: function () {
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })
    this.animation = animation
    animation.translateY(animationShowHeight).step()
    this.setData({
      animation: animation.export(),
    })
  },
  // 上去
  btnClickTo: function () {
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })
    this.animation = animation
    animation.translateY(0).step()
    this.setData({
      animation: animation.export(),
    })
  }  
})

wxml

<button type="primary" bindtap="btnClick"> 点我下去 </button>
<button type="primary" bindtap="btnClickTo"> 点我回去 </button>
<view class="body-view" animation="{{animation}}">
  <view>我一会就出来吓死你</view>
  <view>我一会就出来吓死你</view>
  <view>我一会就出来吓死你</view>
</view>