小程序 wepy wx.createAnimation 向右滑动渐入渐出
<style >
.animation {
width: 100vw;
height: 100vh;
opacity: 0;
background-color: inherit !important;
position: fixed;
top: 0;
left: 0;
}
.inner {
width: 100%;
height: 100vh;
background-color: #ffffff !important;
}
</style>
<template>
<view>
<view class="animation" animation="{{animationData}}"></view>
<view class="inner"></view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class Pass extends wepy.page {
config = {
navigationBarTitleText: 'test'
}
components = {}
data = {
animation: null,
animationData: {}
}
methods = {}
events = {}
onReady() {
this.width = this.$parent.globalData.winWidth
this.height = this.$parent.globalData.winHeight
this.animationData = null
this.animation = null
this.$apply(() => {
this.slideRight(this, -this.width)
})
}
slideRight(vm, px) {
vm.animation = wx.createAnimation({
duration: 5000,
timingFunction: 'ease',
delay: '0',
success: function(res) {
console.log('animation success: ', res)
},
fail: function(err) {
console.log('err:', err)
}
})
vm.animation.translateX(px + 'px').opacity(1).step()
vm.animationData = vm.animation.export()
}
}
</script>