Vue中的列表过渡

1. 组件的切换

<transition>
    <component :is="componentChoice">
    </component>
</transition

2. 单个元素的切换

<transition>
    <button :key="isEditing">
        {{isEditing}}
    </button>
</transition>

不管是组件切换还是单个元素的切换，<transition>标签内部在一个时间都是只有一个元素或者一个组件。

下面我们来看一下列表过渡

在vue的官方文档中指出：

• 不同于<transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。

过渡模式指的是mode='in-out'/'out-in'命令，可以指定离开过渡动画和进入动画的先后顺序。

List Move Transition

对于list来说，除了插入元素enter和移除元素leave会产生动画效果，还提供了一个动画效果：即在元素的position发生改变时，为元素加上v-moveclass标签。利用这个原理，我们可以这样写：

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

在vue的官方教程中，还有这样的一个栗子：

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

//css
.list-item{
transition: all 1s;
display: inline-block;
margin-right: 15px;
}
.list-complete-leave-active{
position: absolute;
}

为所有的元素都加上了list-itemclass标签，并加上transition rule，这样当列表元素的任何一个css样式发生变化的时候（enter，leave，move），都会产生过渡效果。
我们在list-complete-leave-active的css规则中，我们把要移除的元素脱离了文档流，否则，要移除的元素在移除过渡中一直处于文档流中，影响了后面元素的move过渡效果。
这样的话，当我们插入或移除一个元素，影响其他元素的位置的时候，由于vue存在move transition这一机制，元素会平滑过渡到它们新的位置上。

List Stagger Transition

元素的交错过渡是怎么实现的呢？我们可以通过元素data-前缀的attribute，来设置不同delay的callback函数。
官方文档中给了一个很有意思的栗子：

<li v-for="item in computedList" :key="item.name" :data-index="index">
    {{item.name}}
</li>
<script>
    beforeEnter: function(el, done){
        var delay=el.dataset.index*150;
        setTimeout(function(){
               Velocity(el,{opacity: 1, height:"1.6em"},{complete: done});
          },delay);
    }
</script>

li元素绑定的:data-index=index描述了li在列表中的位置，所以在列表中越靠前的li元素，过渡效果对应的回调函数执行得越早。

参考文章：

1. [Vue][V-move]列表进入/离开的平滑过渡，官方教程学习释疑https://blog.csdn.net/Alcantara/article/details/78608226
2. vue进入/离开/列表过渡