小程序 wepy wx.createAnimation 向右滑动渐入渐出

<style lang="less">

.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>

转载于:https://www.cnblogs.com/zhaomeizi/p/9799516.html