点击按钮，实现在按钮右上方出现文字动画效果

点击按钮时，实现在按钮右上方出现文字动画效果

---

项目开发时，碰到一个小需求，需要在按钮点击时，在按钮右上方动态出现相关文字动画效果
项目使用vue2 + ElementUI
主要通过 css的animation属性 实现

直接上代码~

一、代码实现

以下demo代码仅供参考

1. template

<template>
    <div>
        <el-button style="position:relative;"  @mouseleave.native="resetTxtList" @click="clickHandle">
            <div
                ref="badge"
                class="knock"
                v-for="item in txtList"
                :key="item"
            >
                余额+1
            </div>
            点我
        </el-button>
    </div>
</template>

2. js

export default {
    data() {
        return {
            txtList: 0,
            timer: null,
        }
    },
    methods: {
        clickHandle() {
            this.txtList += 1;
        },
        // 鼠标移出按钮时，定时重置txtList，时间间隔为动画的时长
        resetTxtList() {
            this.timer = setTimeout(()=>{
                this.txtList = 0;
                clearTimeout(this.timer);
                this.timer = null;
            }, 500);
        }
    },
}

3. scss

<style lang='scss' scoped>
.knock {
    display: block;
    width: 10px; 
    height: 20px;
    position: absolute; 
    /* font-size: 12px; */
    color: #ff0000;
    top: 0;
    right: 5px; 
    opacity: 1;
    animation: move 0.5s linear 1 alternate forwards;
}
@keyframes move {
    0% {
        display: block;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    100% {
        display: none;
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}
</style>

二、效果图