我就是想要做一個搜索欄隨著下滑漸隱，隨著上滑漸出的動畫，但是找不到流暢的解決方案

一開始嘗試用transition屬性，判斷下滑方向和搜索欄顯示狀態(tài)，當兩者不一致時更新搜索欄height值。

在電腦上看著效果很好，但是用安卓測試的時候卡頓嚴重：

var now = e.detail.scrollTop
var last = this.data.scrollTop
var scrollDown = this.data.scrollDown
var sHeight = this.data.sHeight

if ((now > last && !scrollDown) || (now < last && scrollDown)) {
  sHeight = 40-sHeight
  this.data.scrollDown = !scrollDown
  this.setData({
    sHeight: sHeight
  })
}
this.data.scrollTop = e.detail.scrollTop

然后嘗試使用微信的animation API，然而卡頓依然嚴重：

var animation = wx.createAnimation({
  duration: 500,
  timingFunction: "ease"
})
this.animation = animation

if ((now > last && !scrollDown) || (now < last && scrollDown)) {
  this.data.scrollDown = 1 - scrollDown
  this.animation.scale(scrollDown).step()
  this.setData({
    sHeightAnim: this.animation.export()
  })
}
this.data.scrollTop = e.detail.scrollTop

查了一下感覺transform和animation的運行效率也差不多，畢竟也是要走transition

所以有沒有大佬可以提供一個較好的解決方案orz跪謝