javascript - Vue übermäßiges Hook-Problem

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

Bitte kopieren Sie es, fügen Sie es ein und führen Sie es aus.

Nutzen Sie die offizielle Veranstaltung @after-appear

Wenn die Animation mit dicken Haaren endet. Aber die Konsole gibt 0 aus. Sie sollte 0 und 1 ausgeben.

Eigentlich möchte ich erreichen, dass ich nach dem Ende der Animation weiter darauf drücke, um die Animation fortzusetzen.

滿天的星座2747 Tage vor581

javascript - Vue übermäßiges Hook-Problem

Antworte allen(1)Ich werde antworten