Vue实现列表元素一进一出的过渡效果

在一个展示用户评论数据的场景中，我们需要实现如下图所示的列表过渡效果：

每隔一定的时间，列表最前的一个元素渐变消失、同时最后的一个元素渐变显示。在没有Vue过渡系统之前，要实现这样一个过渡效果还是挺繁琐的。而借助Vue的过渡系统，很容易就可以实现这个效果。

要在Vue中实现这个效果只需要三步即可：

首先、只需要利用Vue提供的transition-group组件将列表的元素包裹起来，而列表元素本身直接用v-for指令循环渲染即可，代码结构如下：

<div id="example">
  <button v-on:click="update">update</button>
  <transition-group name="fade" tag="ul" class="list">
    <li v-for="item in items" :key="item" class="list-item">
      <span>{{ item }}</span>
    </li>
  </transition-group>
</div>

有两个细节需要注意：

• transition-group组件默认会渲染成span标签，可以通过tag属性自定义标签；
• 列表元素必须绑定key，并且key的值是唯一的，否则列表更新的时候某些列表元素不会更新。

第二步、给列表指定过渡样式，过渡样式的前缀是由transition-group的name属性指定的：

.fade-enter,
.fade-leave-to{ opacity:0;}
.fade-enter{transform: translateY(20px);}
.fade-leave-to{transform: translateY(-20px);}  
.fade-enter-active,
.fade-leave-active{transition: all 0.6s;}
.fade-leave-active{position: absolute;right: 0} /*leave-active必须绝对定位移除元素才有过渡效果*/
.fade-move{transition: transform 0.6s;} /* Vue过渡系统提供的元素位移平滑处理*/
.list{width: 300px;position: relative;padding:0}
.list-item{width:100%;padding-bottom:10px;list-style: none;text-align: right;}
.list-item span{display: inline-block;font-size:16px;padding:4px 20px;background-color: rgba(0,0,0,0.5);} 

有两个细节需要注意：

• move只对除开首尾的中间元素的位移生效，首尾元素透明度、位移的过渡还是需要通过leave-active和enter-active指定，如图：

  

• 元素消失的时候即leave-active必须绝对定位，否则消失的元素在过渡的过程中还是占位的，消失的瞬间列表会跳动。 也可以对样式进一步优化，直接给每个列表元素添加transition，而不用分别指定move、leave-active和enter-active的过渡样式：

.fade-enter,
.fade-leave-to{ opacity:0;}
.fade-enter{transform: translateY(20px);}
.fade-leave-to{transform: translateY(-20px);}
.fade-leave-active{position: absolute;right: 0} /*leave-active必须绝对定位移除元素才有过渡效果*/
.list{width: 300px;position: relative;padding:0}
.list-item{transition:all 0.6s;width:100%;padding-bottom:10px;list-style: none;text-align: right;} /* */
.list-item span{display: inline-block;font-size:16px;padding:4px 20px;background-color: rgba(0,0,0,0.5);} 

第三步、更新列表数据，在逻辑中只需要简单的更新列表数据，而不用对列表的元素进行各种繁琐的交互控制，这些元素会自动完成过渡效果：

var demo1=new Vue({
  el:'#example',
  data:{
    items:[1,2,3,4,5,6,7,8,9],
    nextNum:10
  },
  methods:{
    add:function(){
      this.items.push(this.nextNum++)
    },
    remove:function(){
      this.items.splice(0,1)
    },
    update:function(){
      this.add()
      this.remove()
    }
  }
})

数据的更新这里只简单演示了添加、删除数据，实际项目中列表数据的加载、更新等可能会复杂更多。

至此、我们就通过Vue实现了列表元素一进一出的过渡效果。