请教如何优化一个简单但导致卡顿的过渡动画

Question

我就是想要做一个搜索栏随着下滑渐隐，随着上滑渐出的动画，但是找不到流畅的解决方案一开始尝试用transition属性，判断下滑方向和搜索栏显示状态，当两者不一致时更新搜索栏height值。在电脑上看着效果很好，但是用安卓测试的时候卡顿严重：var now = e.detail.scrollTopvar last = this.data.scrollTopvar scrollDown = this.data.scrollDownvar sHeight = this.data.sHeightif ((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 = animationif ((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跪谢

Answer 1

好吧，解决了！！确实是用transform.....

handleScroll: function(e){

var now = e.detail.scrollTop

var last = this.data.scrollTop

var scrollDown = this.data.scrollDown

if ((now > last && !scrollDown) || (now < last && scrollDown))

{

scrollDown = this.data.scrollDown = 1 - scrollDown

this.setData({

hidden: scrollDown ? 'transform: translateY(-60px);':'',

})

}

this.data.scrollTop = now

console.log(now)

},