Vue.js 之 過渡動畫2
阿新 • • 發佈：2018-11-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue-2.5.16.js"></script> <style> ul { padding: 0; margin: 0; list-style: none; } li { border: 1px dashed #ccc; background-color: #eee; line-height: 35px; font-size: 12px; padding-left: 10px; margin: 10px 0; } .v-enter, .v-leave-to{ opacity: 0; transform: translateY(300px); } .v-enter-active, .v-leave-active { transition: all 2s ease; } /* 控制 即將被刪除的那個元素，脫離標準流，從而允許後續的元素，往上頂 */ .v-leave-active { position: absolute; width: 100%; } /* vue自帶的效果 控制 那些將要往上頂的元素，通過 過渡，漸漸地頂上來 */ .v-move{ transition: all 2s ease; } </style> </head> <body> <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">新增</button> </div> <ul> <!-- 1. 如果要為列表新增動畫，必須使用 transition-group 把 v-for 迴圈渲染的元素，包裹起來 --> <transition-group> <li v-for="item in arr" :key="item.id" @click="remove(item.id)"> {{item.name}} </li> </transition-group> </ul> </div> <script> // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: '#app', data: { // 新新增的使用者名稱稱 name: '', arr: [ { id: 1, name: '張三' }, { id: 2, name: '李四' }, { id: 3, name: '趙六' } ] }, methods: { add() { const user = { id: this.arr.length + 1, name: this.name } this.arr.push(user) this.name = '' }, remove(id) { const i = this.arr.findIndex(x => x.id === id) this.arr.splice(i, 1) } } }); </script> </body> </html>