需要實現的效果很簡單，當微信小程序跳轉到該頁面時，微信登錄BUTTON從右往左淡入出現，手機登錄BUTTON從左往右淡入出現，類似於animation.css的簡單效果
官方文檔上是這樣說的：
①創建一個動畫實例 animation。
②調用實例的方法來描述動畫。
③最后通過動畫實例的 export 方法導出動畫數據傳遞給組件的 animation 屬性。
要想給元素添加動畫首先給元素增加一個樣式，顯示動畫之前的樣式，在這里定義了一個.init-right。 再給其定義一個animation屬性，綁定一個變量，這樣在頁面所有地方都可以加上這個屬性來添加動畫
樣式如下，透明度為0，往右邊偏移480rpx
js如下
在頁面加載的時候執行:
效果實現了：
csdn上有一篇關於封裝微信小程序動畫的文章，可以參考一下結合到自己項目中來
https://blog.csdn.net/weixin_42917830/article/details/81701125?utm_source=copy
在APP.JS中添加：
show: function(that, param, opacity) {
var animation = wx.createAnimation({
//持續時間800ms
duration: 800,
timingFunction: 'ease',
});
//var animation = this.animation
animation.opacity(opacity).step()
//將param轉換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設置動畫
that.setData(json)
},
//滑動漸入漸出
slideupshow: function(that, param, px, opacity) {
var animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY(px).opacity(opacity).step()
//將param轉換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設置動畫
that.setData(json)
},
//向右滑動漸入漸出
sliderightshow: function(that, param, px, opacity) {
var animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateX(px).opacity(opacity).step()
//將param轉換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設置動畫
that.setData(json)
},
快速添加多個動畫：
