详解Vue学习笔记进阶篇之列表过渡及其他

本文将介绍Vue中的列表过渡，动态过渡， 以及可复用过渡是实现。

列表过渡

目前为止，关于过渡我们已经讲到：

单个节点
同一时间渲染多个节点中的一个

那么怎么同时渲染整个列表，比如使用

 v-for 

？在这种场景中，使用

 <transition-group>

组件。在我们深入例子之前，先了解关于这个组件的几个特点：

不同于 <transition>， 它会以一个真实元素呈现：默认为一个<span>。你也可以通过 tag 特性更换为其他元素。
内部元素

总是需要 

提供唯一的

key

属性值.列表的进入和离开过渡

现在让我们由一个简单的例子深入，进入和离开的过渡使用之前一样的 CSS 类名。

<div id="app1">
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-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 

属性来自定义前缀，也可以通过