微信小程序中实现某个样式值setData改变时从350rpx到200rpx的平滑过渡效果

方案一：使用 CSS Transition（推荐简单场景）

WXSS

/* 在对应组件的WXSS中添加 */
.transition-effect {
  transition: all 0.4s ease-in-out;
  will-change: bottom; /* 启用GPU加速 */
}

WXML

<!-- 修改后的WXML -->
<view 
  class="transition-effect"
  style="position: absolute;bottom: {{refreshBottomHeight}}rpx;left: 50%;transform: translateX(-50%);" 
  bindtap="rightBtn">
  <!-- 内部内容保持不变 -->
</view>

方案二：使用小程序动画API（推荐复杂动画）

JS

// 在组件/页面的JS中
Page({
  data: {
    animationData: {}
  },

  // 初始化动画
  onReady() {
    this.animation = wx.createAnimation({
      duration: 400,       // 动画时长
      timingFunction: 'ease-out', // 贝塞尔曲线
      delay: 0
    })
  },

  // 更新位置的方法
  updatePosition(newHeight) {
    this.animation.bottom(newHeight + 'rpx').step()
    this.setData({
      animationData: this.animation.export()
    })
  }
})

WXMl

<!-- 修改后的WXML -->
<view 
  animation="{{animationData}}"
  style="position: absolute;left: 50%;transform: translateX(-50%);" 
  bindtap="rightBtn">
  <!-- 内部内容保持不变 -->
</view>

方案对比