1***@qq.com
1***@qq.com
  • 发布:2020-05-15 09:57
  • 更新:2020-05-15 09:57
  • 阅读:737

App 动画不生效

分类:uni-app

代码是这样的 编译没有报错 打点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>
2020-05-15 09:57 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复