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

番茄Salad2025-04-16 9:25

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

WXSS

css 复制代码

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

WXML

html 复制代码

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

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

JS

javascript 复制代码

// 在组件/页面的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

html 复制代码

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

方案对比

特性	CSS Transition	小程序动画API
实现难度	⭐（简单）	⭐⭐（需要API调用）
性能	⭐⭐⭐（GPU加速）	⭐⭐（部分机型有优化）
控制精度	基于样式变化	可编程控制
兼容性	全平台支持	需要基础库2.9.0+
复杂动画支持	仅支持简单过渡	支持多属性复合动画