javascript - Problème de hook excessif avec Vue

<!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>

Veuillez copier, coller et exécuter.

Utilisez l'événement officiel @after-apparaître

Quand l'animation termine les cheveux épais. Mais la console imprime 0. Elle devrait imprimer 0 et 1.

En fait, ce que je veux réaliser, c'est que lorsque l'animation est terminée, continuez à la pousser pour continuer l'animation.

滿天的星座2747 Il y a quelques jours578

javascript - Problème de hook excessif avec Vue

répondre à tous(1)je répondrai