列表过渡transition-group

该文章由 leevare 发布于 ,归类于 Javascript

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

例如图片的轮播效果

<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属性值。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒