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>
