列表过渡transition-group

当需要渲染整个列表的过渡效果时，可以使用这个属性。

例如图片的轮播效果

<transition-group tag="ul" name="fade" class="items">
  <li v-for="(item, index) in items" :key="index" class="item" v-if="nowIndex === index">
    <div class="imgbox">
      <a :href="item.url"><img :src="item.src" class="img-responsive"></a>
    </div>
    <p>{{item.text}}</p>
  </li>
</transition-group>

样式代码

.fade-leave-active,.fade-enter-active {
  transition: all 1s ease;
}
.fade-leave-active,.fade-enter {
  opacity:0;
}

通过tag标签来设置其渲染时替换的标签。

需要注意的地方是使用transition-group渲染的列表中，需要指定唯一的key属性值。