<!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>Please copy and paste and run it.
Use the official event @after-appear
When the animation ends shag. But the console prints 0. It should print 0 and 1.
In fact, what I want to achieve is that when the animation is over, continue to push it and let it continue the animation.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Does anyone know what the problem is?