Vue 列表动画实现
Posted wanguofeng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 列表动画实现相关的知识,希望对你有一定的参考价值。
<!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="./lib/vue-2.4.0.js"></script> <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> </head> <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) ); </script> </body> </html>
以上是关于Vue 列表动画实现的主要内容,如果未能解决你的问题,请参考以下文章