<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 2s;
}
</style>
<link rel="stylesheet" href="res/animate.css">
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handleClick">add</button>
<button @click="handleClose">close</button>
<transition-group
:duration="2000"
enter-active-class="animated slideInLeft"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<div v-for="item of list" :key="item.id">
{{item.content}}
</div>
</transition-group>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
list:[],
index: 0
},
methods: {
handleClick () {
this.list.push({
id: this.index++,
content: 'hello world' + this.index
})
},
handleClose () {
this.list.shift()
},
enter (el, done) {
console.log('enter')
setTimeout(()=>{
done()
},2000)
},
afterEnter (el) {
console.log('afterEnter')
this.list.shift()
},
leave: function (el, done) {
console.log('leave')
done()
},
afterLeave: function (el) {
console.log('afterLeave')
}
}
});
</script>
</body>
</html>
