代码是这样的 编译没有报错 打点onLoad 和watch里面都能正常输出 但是动画就是出不来
也通过调整样式和结构确认不是缓存问题了 动画就是不出现
<template>
<div v-if="value" class='dialog' @click.self="persistent || close()">
<Card class="dialog-content" :animation="animationData" width='610' padding='60'>
<div class="dialog-main">
<slot></slot>
<div class="hr"></div>
<slot name="button"><page-Button width='205' class="button" dark @click="close">关闭</page-Button></slot>
</div>
</Card>
</div>
</template>
<script>
import pageButton from '../button'
import Card from '../card'
export default {
model: {
prop: 'value',
event: 'update'
},
props: {
value: {
type: Boolean,
default: false
},
persistent: {
type: Boolean,
default: false
}
},
data() {
return {
animation: {},
animationData: {}
}
},
onLoad() {
this.animation = uni.createAnimation({
duration: 500,
timingFunction: 'ease',
transformOrigin: "0% 0%",
})
},
onUnload() {
this.animationData = {}
},
watch: {
value() {
if(this.value) {
this.animation.opacity(1).scale(.6).step()
this.animation.scale(1.2).step()
this.animation.scale(1).step()
this.animationData = this.animation.export()
} else {
this.animation.opacity(1).scale(1).step()
this.animation.scale(1.2).step()
this.animation.opacity(0).scale(.6).step()
this.animationData = this.animation.export()
}
}
},
methods: {
close() {
this.$emit('close', false)
}
},
components: { pageButton, Card }
}
</script>
0 个回复