VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move
本例要结合过渡动画四个过程的示意图一起理解。
https://cn.vuejs.org/v2/guide/transitions.html
疑问：
v-for="(item,i) in list" del(i) 传参不传id，改成i ，这个是什么用法？
<style> li{ border: 1px dashed #999; margin: 5px; padding: 5px; line-height: 25px; font-size: 12px; width: 800px; } li:hover{ background-color: hotpink; transition: all 0.8s ease; } .v-enter,.v-leave-to { /* .v-enter, .v-leave-to 设置的过渡样式 自动赋给transition 或 transitiongroup标签了 */ opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { /* .v-enter-active, .v-leave-active 设置的过渡样式 自动赋给transition 或 transitiongroup标签了 */ transition: all 0.6s ease; } .v-move{ transition: all 0.6s ease; } /* v-move 特性。会在元素的改变定位的过程中应用。 比如列表中有元素被删除,其他元素会上移 设置了v-move就会在这起作用. */ .v-leave-active{ position: absolute; /* 当元素设置了 absolute 后，默认就不是100%的宽度了，而是内容多宽就是多宽 所以要给li元素设置一下宽度. */ } /* 用splice删除数组的元素，由于删除的元素经历了一个过渡，始终占据文档流的这个位置， 因此下一个元素要等待其过渡消失后再移动过来，造成一个生硬的效果。 要达到平滑过渡，就要在删除元素leave-active阶段, 用position:absolute 让删除的元素脱离文档流，后面的元素才能同时平滑过渡过来。 */ </style> </head> <body> <div id="app"> ID:<input type="text" v-model="id"> NAME:<input type="text" v-model="name"> <input type="button" value="添加" @click="add()"> <!-- 通过 appear 特性设置节点的在初始渲染的过渡 也就是页面刚加载的时候，实现过渡动画 --> <transition-group tag="ul" appear> <li v-for="(item,i) in list" @click="del(i)" :key="item.id"> <!-- v-for="(item,i) in list" del(i) 传参不传id，改成i ??? 这个是什么用法--> {{item.id}} --- {{item.name}} </li> </transition-group> </div> <script> var vm = new Vue({ el:'#app', data:{ id:'', name:'', list:[ {id:1, name:'赵高'}, // list里用到的id name 等，要先定义在data {id:2, name:'秦桧'}, {id:3, name:'严嵩'}, {id:4, name:'魏忠贤'} ] }, methods:{ add(el){ this.list.push({id:this.id, name:this.name}); this.id = this.name = ''; }, del(i){ this.list.splice(i,1); // i 的用法？？ }, }, }); </script> </body>
