lasuo_nft_front/src/components/LikeButton.vue

<template>
    <div class="like" @click.prevent="like">
        <img :src="isLike ? likeImg : disLikeImg" alt="" />
        <span><slot>16</slot></span>
    </div>
</template>

<script>
export default {
    props: {
        isLike: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            likeImg: require('@assets/like.png'),
            disLikeImg: require('@assets/dislike.png')
        };
    },
    methods: {
        like() {
            this.checkLogin().then(() => {
                this.$el.children[0].className += 'rubberBand';
                setTimeout(() => {
                    this.$el.children[0].className = this.$el.children[0].className.replace(/rubberBand/g, '');
                }, 1000);
                this.$emit('like');
            });
        }
    }
};
</script>

<style lang="less" scoped>
.like {
    color: #949699;
    // line-height: 24px;
    flex-shrink: 0;
    .flex();
    display: inline-flex;
    img {
        vertical-align: middle;
        margin-right: 3px;
        width: 18px;
        height: 18px;
        display: inline-block;
    }

    span {
        vertical-align: middle;
        font-size: @font1;
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.rubberBand {
    animation: rubberBand ease-in-out 1s;
}
</style>