vue的transition-group实现列表的添加和删除动画
Posted wangyuxue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的transition-group实现列表的添加和删除动画相关的知识，希望对你有一定的参考价值。
一、解释
1、在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup
2、 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果
3、给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果
4、通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签
二、代码
<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);// 开始和结束位置在Y轴的80px处 } .v-enter-active, .v-leave-active { transition: all 0.6s ease;// 从Y轴的80px处渐渐移动到上面
}
/* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
.v-move { transition: all 0.6s ease; }
.v-leave-active{ position: absolute; }
</style>
<body> <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 属性 --> <!-- 给 ransition-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> // 创建 Vue 实例，得到 ViewModel var 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)//从第i处删除1个元素 } } }); </script> </body>
以上是关于vue的transition-group实现列表的添加和删除动画的主要内容，如果未能解决你的问题，请参考以下文章
vue的transition-group 下面每个元素分别执行动画