transition-group List Transitions

List Enter/Leave Transitions

<transition-group tag="ul"> <!--tag renders as ul-->
    <li v-for="item in list" :key="item">{{item}}</li> <!--child elements must have key-->
</transition-group>

Note: List elements must have a 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.

List Move Transitions

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

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

List Transition & Move Transition

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