那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 <transition-group>组件。在我们深入例子之前，先了解关于这个组件的几个特点：
不同于 <transition>， 它会以一个真实元素呈现：默认为一个<span>。你也可以通过 tag 特性更换为其他元素。
内部元素 总是需要 提供唯一的 key属性值.列表的进入和离开过渡
现在让我们由一个简单的例子深入，进入和离开的过渡使用之前一样的 CSS 类名。
<div> <button @click="add">Add</button> <button @click="remove">Remove</button> <transition-group tag="p"> <span v-for="item in items" :key="item"> {{item}} </span> </transition-group> </div>
.list-item{ display: inline-block; margin-right: 10px; } .list-enter-active, .list-leave-active{ transition: all 1s; } .list-enter, .list-leave-to{ opacity: 0; transform: translateY(30px); }
var app1 = new Vue({ el:'#app1', data:{ items:[1,2,3,4,5,6,7,8,9], nextNum:10 }, methods:{ randomIndex:function () { return Math.floor(Math.random() * this.items.length) }, add:function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove:function () { this.items.splice(this.randomIndex(), 1) } } })
运行结果：
这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡，我们下面会解决这个问题。
列表的位移过渡
<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。
v-move对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：
<div> <button @click="shuffle">Shuffle</button> <transition-group tag="ul"> <li v-for="item in items" :key="item"> {{item}} </li> </transition-group> </div>
.flip-list-move { transition: transform 1s; }
var app2 = new Vue({ el:'#app2', data:{ items:[1,2,3,4,5,6,7,8,9] }, methods:{ shuffle:function () { this.items = _.shuffle(this.items) } } })
这个例子需要添加以下引用
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
运行结果：
这个看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列
使用 transforms 将元素从之前的位置平滑过渡新的位置。
我们将之前实现的例子和这个技术结合，使我们列表的一切变动都会有动画过渡。
<div> <button @click="shuffle">Shuffle</button> <button @click="add">Add</button> <button @click="remove">Remove</button> <transition-group tag="p"> <span v-for="item in items" :key="item"> {{item}} </span> </transition-group> </div>
.list-complete-item{ transition: all 1s; display: inline-block; margin-right: 10px; } .list-complete-enter, .list-complete-leave-to{ opacity: 0; transform: translateY(30px); } .list-complete-leave-active{ position: absolute; }
var app3 = new Vue({ el:'#app3', data:{ items:[1,2,3,4,5,6,7,8,9], nextNum:10 }, methods:{ shuffle:function () { this.items = _.shuffle(this.items) }, randomIndex:function () { return Math.floor(Math.random() * this.items.length) }, add:function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove:function () { this.items.splice(this.randomIndex(), 1) } } })
运行结果：
列表的渐进过渡
通过 data 属性与 JavaScript 通信 ，就可以实现列表的渐进过渡：
<div> <input v-model="query"> <transition-group tag="ul" :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave"> <li v-for="(item, index) in computedList" :key="item.msg" :data-index="index"> {{item.msg}} </li> </transition-group> </div>
var app4 = new Vue({ el:'#app4', data:{ query:'', list:[ {msg:'Bruce Lee'}, {msg:'Jackie Chan'}, {msg:'Chuck Norris'}, {msg:'Jet Li'}, {msg:'Kung Furry'}, {msg:'Chain Zhang'}, {msg:'Iris Zhao'}, ] }, computed:{ computedList:function () { var vm = this return this.list.filter(function (item) { return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 }) } }, methods:{ beforeEnter:function (el) { el.style.opacity = 0 el.style.height = 0 }, enter:function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, {opacity:1, height:'1.6em'},{complete:done}) }, delay) }, leave:function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, {opacity:0, height:0}, {complete:done}) }, delay) } } })
上述js代码需要添加对Velocity引用：
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
运行结果如下：
可复用的过渡