列表的进入/离开过渡

<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;
}

<div id="root">
    <button @click="handleAdd">Add</button>
    <button @click="handleRemove">Remove</button>
    <transition-group tag="ul">
      <li v-for="item in list" :key="item">{{item}}</li>
    </transition-group>
</div>

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

<script>
const vm = new Vue({
  el: '#root',
  data: {
    list: [1,2,3]
    },
  methods: {
    handleAdd() {
      this.list.push(this.list.length + 1)
    },
    handleRemove() {
      this.list.pop()
    }
  }
})
</script>

列表的排序过渡

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="root">
    <button @click="shuffle">洗牌</button>
    <transition-group tag="ul">
      <li v-for="item in list" :key="item">{{item}}</li>
    </transition-group>
</div>

<style>
.v-move {
  transition: transform 1s;
}
</style>

<script>
var vm = new Vue({
  el: '#root',
  data: {
    list: [1,2,3,5,6,7,8]
  },
  methods: {
    shuffle: function () {
      this.list = _.shuffle(this.list)
    }
  }
})
</script>

列表过渡&排序过渡

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="list-complete-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span
      v-for="item in items"
      v-bind:key="item"
      class="list-complete-item"
    >
      {{ item }}
    </span>
  </transition-group>
</div>

<style>
.list-complete-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to{
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}
</style>

<script>
new Vue({
  el: '#list-complete-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})
</script>