Vue中实现过渡效果

过渡效果，当然只有dom从显示到隐藏或隐藏到显示才能用。Vue.js为我们提供了内置的过渡组件transition和transition-group。

过渡阶段：

Vue将元素的过渡分为四个阶段，进入前，进入后，消失前，消失后。但是往往进入后的状态等同于消失前的状态，即元素的默认正常状态。所以四个阶段可以理解为三个阶段：进入前，正常态，消失后。三个状态分别对应不同的class，如下可以对不同阶段分别设置效果：

进入前.v-enter{}
正常态.v-enter-active{}
离开后.v-leave-active{}

那么如果我们有多个元素需要加上过渡效果呢？类名该如何处理？

可以加一个属性name 此时css类名选择器改为 .name-enter .name-enter-active .name-leave-active

基本使用：

如果是单一元素，直接给外面包裹上transition标签即可。当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

<transiton name="fade">
  <div key="div1"></div>
  <div key="div2"></div>
</transition>

过渡模式：

如果有两个元素轮流显示，在第一个元素消失的同时第二个元素会已经开始进入，所以会存在两个元素同时被渲染的小缺陷，因此就要用到过渡模式了。

给transition标签加上mode属性，可选值：

in-out:要进入的先进入，然后要消失的再消失
out-in:要消失的先消失，然后要进入的再进入

动态组件:

有一种情况，transition里面的元素都设置了v-if或者v-show来进行显隐的切换。这时我们可以使用动态组件。此时也不需要绑定key。

<transition name="fade" mode="out-in">
  <component :is="item"></component>
</transition>

components: {
    'a': {
      template: '<div>Component A</div>'
    },
    'b': {
      template: '<div>Component B</div>'
    }
  }

列表过渡：

使用了v-for循环渲染的列表应该如何添加过渡效果呢？

除了上文讲的transition组件，还有transition-group。与transition不同的是，它将会被渲染成一个真实存在的dom元素，默认情况下是span，可以通过tag属性来设置要渲染成什么元素。

<transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-item">
      {{ item }}
    </span>
</transition-group>

这时列表的过渡还会存在一个问题，比如为列表中插入一个新的元素，这时过渡的效果只会出现在新元素上，而其他元素还是会以一种生硬的形式改变状态。

如何解决这个问题呢？

其实transition还有一个新增的过渡类v-move，同样可以通过设置name来改变类名：

.list-move {
  transition: transform 1s;
}

友情提示：配合animate.css食用口味更佳哦

<transition-group enter-active-class="animated tada" leave-active-class="animated bounceOutRight" mode="in-out">
 <div
    class="item"
    v-for="(item,index) in list"
    @click="deleteTarget(index)"
    :key="index"
  >{{item}}</div>
</transition-group>

main.js：

import animated from 'animate.css'

Vue.use(animated)