需要实现的效果很简单，当微信小程序跳转到该页面时，微信登录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)
},
快速添加多个动画：
