<Transition>组件我们学得差不多了，我们最后再来学习一下 <TransitionGroup>组件，vue为我们提供了两个专门用来设置动画的组件。一个是<Transition>另一个就是<TransitionGroup>组件。

<TransitionGroup> 一般用于对 v-for 列表中的元素或组件的插入、移除和改变顺序等操作添加动画效果。

和 <Transition>的区别

<TransitionGroup>和<Transition>组件用法基本相同，拥有相同的 props和CSS 过渡 class选择器以及相同的JavaScript 钩子函数。

不同点：

• <TransitionGroup>不支持<Transition>组件的过渡模式

• <TransitionGroup>用作于列表，<Transition>用作于单个元素。

• CSS 过渡 class选择器 会被应用在列表内的元素上。

列表数据添加动画

我们可以使用 <TransitionGroup> 对一个 v-for 列表设置入场 / 离场动画。

我们使用<TransitionGroup>组件来嵌套一个列表，我们用v-for遍历一个li元素得到一个列表，需要先声明一个变量并且一些模拟数据items:["number1","number2","number3"]

 template: `
      <button @click="handelAddItems" >添加一项</button>
      <TransitionGroup tag="ul">
        <li v-for="(item,index) of items" :key="item">{{item}}</li>
      </TransitionGroup>  
    `

我们在<TransitionGroup>组件上设置tag="ul"属性，原因是我们li标签需要放置在ul标签里面配套使用，否者浏览器会报出警告，当我设置tag属性为ul后， <TransitionGroup>会被渲染成一个ul标签，否者它是不会被渲染的。

我们还放了一个按钮，并且给它绑定了一个click点击事件 ，我们需要再handelAddItems方法里面来实现一个列表添加的功能，为了方便演示我们往列表前面添加数据。

methods: {
    handelAddItems(){
        this.items.unshift("number" + this.items.length + 1)
    }
 },

好，目前我们已经实现列表的添加，那么我们来给它设置一个添加动画。

<style>
  .v-enter-from{
    opacity: 0;
    transform: translateX(30px);
  }

  .v-enter-active{
    transition: all .5s ease;
  }
  .v-enter-to{
    opacity: 1;
    transform: translateX(0);
  }
</style>

我们先来编写入场动画的css代码，主要还是已过渡来实现效果。让新添加的列表实现一个从右边滑动到左边显示并且还伴随着逐渐呈现的效果。

好，目前我们已经实现了列表添加的动画，可以到浏览器看效果了。

优化动画效果

在我们目前实现添加动画，还有一个不足之处，就是当我添加数据的时候，列表中已有的数据，会往下移动让出一个位置，这样的一个动作它比较生硬，我们想给它也设置一个动画，那么我们怎么来做呢。我们可以用到了另一个特制的class选择器，v-move

我让给这个class选择器设置一个，过渡transition，我们直接放到v-enter-active共同用一个样式属性。因为它本来就是作用在了所有的属性上。

.v-move,
.v-enter-active{
  transition: all .5s ease;
}

然后我们运行看一下效果，这样看起来就完美多了。

列表数据移除动画

移动动画的，我们参照入场动画来时设置。

<style>
  .v-leave-to,
  .v-enter-from{
    opacity: 0;
    transform: translateX(30px);
  }

  .v-move,
  .v-leave-active,
  .v-enter-active{
    transition: all .5s ease;
  }

  .v-leave-from,
  .v-enter-to{
    opacity: 1;
    transform: translateX(0);
  }

  .v-leave-active {
    position: absolute;
  }

</style>

唯一不同的是，我们需要在.v-leave-active选择器里面来设置position: absolute;让它脱离文档流，以便浏览器能够正确地计算移动的动画。 否则.v-move的过渡会无效。

好那么这几课，我们就讲到这里。