当需要渲染整个列表的过渡效果时,可以使用这个属性。
例如图片的轮播效果
<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
属性值。
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!