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.