前面的话

　　本文将详细介绍Vue列表过渡

 

概述

　　前面分别介绍了单元素和，以及。如何同时渲染整个列表呢？在这种情景中，需要使用<transition-group>组件

【<transition-group>】

　　<transition-group>不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。也可以通过 tag 特性更换为其他元素。而且其内部元素总是需要提供唯一的 key 属性值

 

普通过渡

　　下面是一个添加和删除列表项的例子

     
  
      Add  
      Remove  
          
       {
   {item}}  
      
     

 

平滑过渡

　　上面这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡

【v-move】

　　<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置

　　在上面代码中基础上，做出如下改进：

　　1、增加.list-move的样式，使元素在进入时实现过渡效果

　　2、在.list-leave-active中设置绝对定位，使元素在离开时实现过渡效果

 

变换过渡

　　下面接着利用move属性，进行变换过渡，即一个列表中的列表项既不增加也不减少，只是不断地变换其位置

     
  
      shuffle  
          
       
{
   {item}}
  
      
     

　　下面的效果看起来很神奇，内部的实现，Vue 使用了一个叫  简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置

　　下面将进入离开的例子和这个技术结合， 使列表的一切变动都会有动画过渡

　　[注意]使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

　　以上代码中，由于move、enter和leave都需要设置transition。因此，直接在元素上设置transition即可

　　下面是完整代码

     
     
  
      shuffle  
      Add  
      Remove    
          
       {
   {item}}  
      
     

 

多维列表

　　FLIP 动画不仅可以实现单列过渡，多维网格的过渡也同样简单

     
     
  
      shuffle  
          
       {
   { cell.number }}  
      
     

 

渐进过渡

　　通过 data 属性与 JavaScript 通信 ，就可以实现列表的渐进过渡

　　下面是使用CSS过渡实现的一个例子

     
     
  
        
          
       
{
   {item}}
  
      
     

　　上面的效果中，列表项是一齐运动的。如果要实现依次运动的效果，则需要使用JS过渡来实现

     
     
  
        
          
       
{
   {item}}