1. 使用默认的名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
/*添加的时候*/
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transform-origin: left center;
transition: opacity 3s;
animation: bounce-in 1s;
}
/*移除的时候*/
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transform-origin: left center;
transition: opacity 2s;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<div id="app">
count : {{size}}
<input type="text" v-model="inputValue">
<button @click="press">press</button>
<ul>
<transition-group name="fade">
<todo-item :content="i"
v-for="(i,index) in list"
:index="index"
:key="index"
@delete="deleteChild(index)"></todo-item>
</transition-group>
</ul>
</div>
<script>
let todoItem = {
props: ['content'],
template: '<li @click="press">{{content}}</li>',
methods: {
press(target) {
this.$emit('delete')
}
}
}
const app = new Vue({
el: '#app',
data: {
list: ['第一', '第二'],
inputValue: '',
count: 0
},
components: {
TodoItem: todoItem
},
methods: {
press: function () {
// alert("press")
this.list.push(app.$data.inputValue)
this.inputValue = ''
},
deleteChild: function (childNode) {
console.log(childNode)
this.list.splice(childNode, 1)
}
},
watch: {
list: function (list, newlist) {
this.count = newlist.length
},
inputValue: function (oldVal, newVal) {
console.log(newVal)
}
},
computed: {
size: {
get() {
return this.count;
},
set(value) {
console.log(value)
}
}
}
})
</script>
</body>
</html>
2. 使用 animate.css 库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/2.0/animate.css" rel="stylesheet"> <style> </style> </head> <body> <div id="app"> count : {{size}} <input type="text" v-model="inputValue"> <button @click="press">press</button> <ul> <transition-group name="fade" appear appear-active-class="animated tada" :duration="{ enter: 200, leave: 200 }" enter-active-class="animated swing" leave-active-class="animated shake" > <todo-item :content="i" v-for="(i,index) in list" :index="index" :key="index" @delete="deleteChild(index)"></todo-item> </transition-group> </ul> </div> <script> let todoItem = { props: ['content'], template: '<li @click="press">{{content}}</li>', methods: { press(target) { this.$emit('delete') } } } const app = new Vue({ el: '#app', data: { list: ['第一', '第二'], inputValue: '', count: 0 }, components: { TodoItem: todoItem }, methods: { press: function () { // alert("press") this.list.push(app.$data.inputValue) this.inputValue = '' }, deleteChild: function (childNode) { console.log(childNode) this.list.splice(childNode, 1) } }, watch: { list: function (list, newlist) { this.count = newlist.length }, inputValue: function (oldVal, newVal) { console.log(newVal) } }, computed: { size: { get() { return this.count; }, set(value) { console.log(value) } } } }) </script> </body> </html>