列表過渡

今天來到動畫的最後一篇，之前都只是針對單一元件或一次顯示一個元件，那如果遇到一整個列表的內容呢？還記得之前學過的v-for嗎？

Vue[07]-陣列v-for
https://ithelp.ithome.com.tw/articles/10202408

這時就要用到今天看的<transition-group>了！它跟之前學的<transition>不一樣，差別如下：

• <transition-group>會渲染出一個真實的html標籤，預設是<span>，而你也可以選擇自訂(tag)為其它標籤。
• 無法使用「漸變模式(in-out與out-in)」，因為不再是元件之間來回切換。
• 每個元件需要設定一個key值，不能重覆。

接著就來用範例了解一下<transition-group>：

<template>
  <div id="app">
    <button @click="add">新增</button>
    <button @click="del">移除</button>
    <transition-group name="list" tag="div">
      <span v-for="item in team" class="player" :key="item.key">
        {{ item.name }}
      </span>
    </transition-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        team: [
          {key: 1, name: '蟻人'},
          {key: 2, name: '黃蜂女'},
          {key: 3, name: '皮姆博士'},
          {key: 4, name: '衝康保全'}
        ]
      }
    },
    methods: {
      add() {
        this.team.push({ key: 5, name: "螞蟻" });
      },
      del() {
        this.team.splice(this.team.length-1)
      }
    }
  }
</script>

<style>
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  button {
    margin: 0 10px 20px;
  }
  .player {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    color: black;
    margin: 0 10px;
  }
  .list-item {
    display: inline-block;
    padding: 0 10px; 
  }
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
  }
</style>

• 我在上方範例寫了一組隊員名單，加入「新增隊員」及「移除隊員」兩個按鈕，並分別加入函式。
• <transition-group name="list" tag="div"> 記得剛說的，它會渲染出一個標籤，而我指定(tag)為div標籤，前幾天的「動畫(一)」還記得嗎？「自定名稱」要加name。
• <span v-for="item in team" class="player" :key="item.key"> 我在<span>上寫了一組v-for，並加入css樣式，以及剛提到一定要加入「唯一的key值」，接著綁入「陣列」資料。
• add()函式：在team陣列中push(於陣列最後新增)一組新資料為{ key: 5, name: "螞蟻" }。
• del()函式：在team陣列中splice(移除)一組資料(this.team.length-1)目標為這組陣列的最後一個(陣列長度-1為最後一個)。
• 最後在data()中寫入team陣列資料(包含key)。

css的部分就不特別說明了，忘記的話可以回「動畫(一)」看一下。

Vue[21]-動畫(一)
https://ithelp.ithome.com.tw/articles/10207931

完成後你就能從陣列尾端「新增」或「刪減」小隊名單了！

列表亂數排序

<transition-group>還有一個特別用法，它能改變陣列的排序，不過想用它之前，你需要先安裝npm i --save lodash.shuffle才能使用shuffle，安裝完後就可以開始看以下範例：

<template>
  <div id="app">
    <button @click="add">新增</button>
    <button @click="del">移除</button>
    <button @click="shuffle">改變陣型</button>
    <transition-group name="list" tag="div">
      <span v-for="item in team" class="player" :key="item.key">
        {{ item.name }}
      </span>
    </transition-group>
  </div>
</template>

<script>
  let shuffle = require('lodash.shuffle')
  export default {
    data() {
      return {
        show: false,
        team: [
          {key: 1, name: '蟻人'},
          {key: 2, name: '黃蜂女'},
          {key: 3, name: '皮姆博士'},
          {key: 4, name: '衝康保全'}
        ]
      }
    },
    methods: {
      add() {
        this.team.push({ key: 5, name: "螞蟻" });
      },
      del() {
        this.team.splice(this.team.length-1)
      },
      shuffle() {
        this.team = shuffle(this.team)
      }
    }
  }
</script>

<style>
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  button {
    margin: 0 10px 20px;
  }
  .player {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    color: black;
    margin: 0 10px;
  }
  .list-item {
    display: inline-block;
    padding: 0 10px; 
  }
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
  }
  .list-move {
    transition: transform 1s;
  }
</style>

• 新增「改變陣型」按鈕，並加入函式。
• 在<script>中定義let shuffle = require('lodash.shuffle') (就是剛剛安裝的)。
• shuffle()函式：在team陣列中shuffle(亂數排序)。
• 最後css.list-move加入漸變效果。

完成後，按下「改變陣型」按鈕就能亂數排序了！！

以上就是今天的vue的動畫介紹。