transition-group列表过渡
# transition-group列表过渡
# 列表的进入/离开过渡
<transition-group tag="ul"> <!--tag转为ul-->
<li v-for="item in list" :key="item">{{item}}</li> <!--子元素要有key-->
</transition-group>
1
2
3
2
3
注意:列表元素一定要有key
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(30px);
}
.v-enter-active,.v-leave-active{
transition: all 1s;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 列表的排序过渡
.v-move {
transition: transform 1s;
}
1
2
3
2
3
列表过渡&排序过渡
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13