<!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.
有人知道什么问题吗