transition-group列表过渡

# transition-group列表过渡

# 列表的进入/离开过渡

代码语言：javascript复制

<transition-group tag="ul"> <!--tag转为ul-->
    <li v-for="item in list" :key="item">{{item}}</li> <!--子元素要有key-->
</transition-group>

注意：列表元素一定要有key

代码语言：javascript复制

.v-enter,.v-leave-to{
  opacity: 0;
  transform: translateX(30px);
}
.v-enter-active,.v-leave-active{
  transition: all 1s;
}

# 列表的排序过渡

代码语言：javascript复制

.v-move {
  transition: transform 1s;
}

列表过渡&排序过渡

key transition 排序

0 人点赞