javascript - Vue 过度钩子的问题-PHP中文网问答

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
    <style>
        body {
            overflow: hidden;
        }
        .active {
            animation: slide 2s linear;
        }
        .transition {
            position: relative;
            top: 100px;
            left:0;
        }
        @keyframes slide {
            0% {
                transform: translate(120%, 0);
            }

            100% {
                transform: translate(-50%, 0);
            }
        }
    </style>
</head>
<body>
<p id="app">
    <template v-for="(item, index) of items">
        <transition  enter-active-class="active" @after-appear="xx(index)" appear="">
            <p class="transition" v-show="item.show" :style="{animationDuration: '3s'}">{{ item.msg }}</p>
        </transition>
    </template>
</p>
<script>

let vm = new Vue({
    el: '#app',
    data () {
        return {
            items: [
                {
                    show: true,
                    msg: 111,
                    time: new Date()*1,
                    ms: '30'
                },
                {
                    show: true,
                    msg: 222,
                    time: new Date()*1,
                    ms: '30'
                },
            ]
        }
    },
    methods: {
        xx (index) {
            console.log(index)
            let data = this.items[index];   // 记录哪个对象
            this.items.splice(index, 1);    // 删除对应的
                // this.items.push(data);
            
        },
    }
});



</script>


</body>
</html>

大家复制粘贴运行一下。

用官方提供的这个事件 @after-appear

当动画结束了粗发。但是控制台打印出来的是0，应该打印0和1才对。

其实我想实现的是当动画结束了，继续push上去让他继续动画。