VUE实例课程---8、列表动画
一、总结
一句话总结：
列表动画 也就是对列表使用动画，需要transition-group、v-move等知识点配合使用，列表动画记得对v-for设置 :key 属性
<style> li { border: 1px dashed #999; margin: 5px; line-height: 35px; padding-left: 5px; font-size: 12px; width: 100%; } li:hover { background-color: hotpink; transition: all 0.8s ease; } .v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 0.6s ease; } /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */ .v-move { transition: all 0.6s ease; } .v-leave-active{ position: absolute; } </style> <div id="app"> <div> <label> Id: <input type="text" v-model="id"> </label> <label> Name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div> <!-- <ul> --> <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup --> <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 --> <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 --> <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 --> <transition-group appear tag="ul"> <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> {{item.id}} --- {{item.name}} </li> </transition-group> <!-- </ul> --> </div> <script src="../js/vue.js"></script> <script> // 创建 Vue 实例，得到 ViewModel let vm = new Vue({ el: '#app', data: { id: '', name: '', list: [ { id: 1, name: '熊猫' }, { id: 2, name: '兔子' }, { id: 3, name: '老虎' }, { id: 4, name: '海豚' } ] }, methods: { add() { this.list.push({ id: this.id, name: this.name }) this.id = this.name = '' }, del(i) { this.list.splice(i, 1) } } }); </script>
1、<transition-group appear tag="ul"> 中 tag="ul" 的作用是什么？
指定transition-group的渲染标签为ul：通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签
2、<transition-group appear tag="ul"> 中的appear的作用？
设置入场动画：给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果
3、为 v-for 循环创建的元素设置动画 的注意事项？
1、设置 :key 属性：如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性
2、使用transition-group：如果要为 v-for 循环创建的元素设置动画，不能使用 transition 包裹，需要使用 transition-group
4、v-move的作用是什么（比如这里删除元素的动画效果）？
v-move attribute会在元素改变定位的过程中应用动画，比如删除元素、元素乱序等改变元素位置的操作
<style> /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */ .v-move { transition: all 0.6s ease; } .v-leave-active{ position: absolute; } </style>
5、给hover效果设置动画？
在hover的样式上加上transition效果，例如transition: all 0.8s ease;
li:hover {
background-color: hotpink;
transition: all 0.8s ease;
}
二、列表动画
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表动画</title> 6 <style> 7 li { 8 border: 1px dashed #999; 9 margin: 5px; 10 line-height: 35px; 11 padding-left: 5px; 12 font-size: 12px; 13 width: 100%; 14 } 15 16 li:hover { 17 background-color: hotpink; 18 transition: all 0.8s ease; 19 } 20 21 22 23 .v-enter, 24 .v-leave-to { 25 opacity: 0; 26 transform: translateY(80px); 27 } 28 29 .v-enter-active, 30 .v-leave-active { 31 transition: all 0.6s ease; 32 } 33 34 /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */ 35 .v-move { 36 transition: all 0.6s ease; 37 } 38 .v-leave-active{ 39 position: absolute; 40 } 41 </style> 42 </head> 43 <body> 44 <!-- 45 46 47 48 --> 49 <div id="app"> 50 51 <div> 52 <label> 53 Id: 54 <input type="text" v-model="id"> 55 </label> 56 57 <label> 58 Name: 59 <input type="text" v-model="name"> 60 </label> 61 62 <input type="button" value="添加" @click="add"> 63 </div> 64 65 <!-- <ul> --> 66 <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup --> 67 <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 --> 68 <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 --> 69 <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 --> 70 <transition-group appear tag="ul"> 71 <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> 72 {{item.id}} --- {{item.name}} 73 </li> 74 </transition-group> 75 <!-- </ul> --> 76 77 </div> 78 <script src="../js/vue.js"></script> 79 <script> 80 // 创建 Vue 实例，得到 ViewModel 81 let vm = new Vue({ 82 el: '#app', 83 data: { 84 id: '', 85 name: '', 86 list: [ 87 { id: 1, name: '熊猫' }, 88 { id: 2, name: '兔子' }, 89 { id: 3, name: '老虎' }, 90 { id: 4, name: '海豚' } 91 ] 92 }, 93 methods: { 94 add() { 95 this.list.push({ id: this.id, name: this.name }) 96 this.id = this.name = '' 97 }, 98 del(i) { 99 this.list.splice(i, 1) 100 } 101 } 102 }); 103 </script> 104 </body> 105 </html>
