vue动态添加dom元素、css3 animation 动画 实现字体上升并逐渐消失效果

效果

原理：animation动画，实现上升，渐隐藏。v-for指令渲染dom节点，settimeout定时减少txtList，删除dom节点

html结构：

        <button @click="knock">敲击<button>

            <span class="knocktxt" v-for="item in txtList">功德+1</span>

js代码：   

export default {
        data() {
            return {
                txtList:0,
            }

        methods:{

       knock（）{

                this.txtList+=1;

                settimeout(()=>{

                        this.txtList-=1;

                      },1000);

        }

        }
        },               

css代码：

    .knocktxt{
        display: block;
        width: 50px;
        color:white;
        font-size: 16px;
        animation: move  1s linear 1 alternate forwards;
        position: absolute;
        top:50px;
        
    }
    @keyframes move{
        0%{
            top:100px;
            opacity: 0.2;
        }
    }