目前为止，关于过渡我们已经讲到：
- 单个节点
- 同一时间渲染多个节点中的一个
那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：
- 不同于
<transition>，它会以一个真实元素呈现：默认为一个<span>。你也可以通过tag特性更换为其他元素。 - 过渡模式不可用，因为我们不再相互切换特有的元素。
- 内部元素 总是需要 提供唯一的
key属性值。
CSS
- .v-enter, .v-leave-to{
- opacity:0;
- }
- .v-enter-active, .v-leave-active{
- transition: opacity 3s;
- }
- .v-move {
- transition: transform 1s;
- }
<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。
本文没有通过name属性来定义前缀，所以样式前缀都为v-
HTML
- <button @click="add">add</button>
- <button @click="remove">remove</button>
- <button @click="shuffle">shuffle</button>
- <transition-group tag="ul">
- <p v-for="item in list" :key="item.id">{{item.id}} -- {{item.name}}</p>
- </transition-group>
不同于transition，它会以一个真实元素呈现：默认打开P标签被包裹在span标签内。我们也可以通过tag特性更换为其他元素。这里我们通过tag="ul"，将p标签以及内容包裹在了ul里面。
JS
- var count = 1;
- var num = 1;
- var vm = new Vue({
- el: '#root',
- data: {
- list: []
- },
- methods: {
- add: function () {
- this.list.push({
- id:count++,
- name:'我是第' + num++ +'行！'
- })
- },
- remove: function () {
- this.list.splice(0,1)
- },
- shuffle: function () {
- this.list = _.shuffle(this.list)
- }
- }
- })
shuffle是用到lodash库中的一个方法，作用是打乱list集合并返回打乱的新数组。
效果
微信小程序
互联网开发，终身学习者，欢迎您的关注！
