需要實作的效果很簡單，當微信小程式跳轉到該頁面時，微信登入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)
},
快速添加多個動畫：