vuepress-theme-vdoing/docs/《Vue》笔记/03.过渡&动画/120.transition-group列表过渡.md

title	date	permalink	categories	tags	author
transition-group列表过渡	2020-02-04 13:17:42	/pages/0aa92922ace6bb5e	《Vue》笔记 过渡&动画	null	name link xugaoyi https://github.com/xugaoyi

transition-group列表过渡

列表的进入/离开过渡

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

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

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

See the Pen vue列表过渡 by xugaoyi (@xugaoyi) on CodePen.

列表的排序过渡

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

See the Pen vue列表过渡-排序过渡 by xugaoyi (@xugaoyi) on CodePen.

列表过渡&排序过渡

See the Pen vue列表过渡&排序过渡 by xugaoyi (@xugaoyi) on CodePen.