vue svg动画

<template>
    <span ref="dblclickbox" class="like-style">
        <div ref="lottie" class="like-motion" style="display: none"></div>
    </span>
</template>
<script>
import Lottie from 'lottie-web';
import LikeAnim from '@/js/animation/terminal_like.json';

export default {
    props: {
        isDisplay: {
            type: Boolean,
            required: true
        },
        isLike: {
            type: Boolean,
            required: true
        }
    },
    watch: {
        isDisplay(value, ol) {
            // console.log('watch----', value, this.isLike);
            if (value) {
                this.$refs.lottie.style.display = 'block';
                this.likeMotion.play();
                // isDisplay还原，否则下次点击不会触发watch
                this.$emit('update:isDisplay', false);
                !this.isLike && this.$emit('actionLike');

                setTimeout(() => {
                    this.likeMotion.stop();
                    this.$refs.lottie.style.display = 'none';
                }, this.likeMotion.getDuration() * 1000);
            }
        }
    },
    mounted() {
        let that = this;
        that.likeMotion = Lottie.loadAnimation({
            container: that.$refs.lottie,
            renderer: 'svg',
            loop: true,
            autoplay: false,
            animationData: LikeAnim
        });
    }
};
</script>

<style lang="scss" scoped>
.like-style {
    .like-motion {
        position: fixed;
        top: -10%;
        left: 0;
        right: 0;
        z-index: 4;
        background: rgba(0, 0, 0, 0.3);
    }
}
</style>