vue.js之過渡動畫

vue提供了一個封裝動畫的組件 <transition name="tr"></transition>,將須要執行動畫的元素包裹在該組件中，在經過css修改樣式便可知足需求
命名該動畫的樣式使用 .v-enter等過渡類名來定義動畫 如<transition name="tr"></transition> 的類名爲 .tr-enter
vue一共提供了6個過渡類名，官方文檔的解釋有一些拗口，我決定以點擊顯示底部彈框爲例解釋6個類名的狀態

1. v-enter: 彈框顯示前的樣式，過渡的開始狀態, 也就是動畫還沒開始前，動畫的起始位置
2. v-enter-active 動畫生效的狀態，從底部過渡到頁面的過程
3. v-enter-to 動畫執行完的結束狀態，也就是彈出結束後顯示在頁面的樣式
4. v-leave 隱藏元素，離開動畫的開始狀態，元素消失開始的樣式
5. v-leave-active 隱藏元素過程當中，離開動畫的生效動態即離開的過程，從上到下滑
6. v-leave-to 隱藏元素完成，離開動畫的結束狀態(此時v-leave的樣式被刪除)

用通俗的語句解釋完6個狀態後開始書寫樣式，將點擊顯示/點擊隱藏 兩個動做分解

// 點擊顯示彈窗的動畫
// 彈框出現前的樣式
.slide-enter{
   transform: translate3d(0,100%,0)
}
// 從下往上彈出的過程，即過渡效果的樣式
.slide-enter-active{
    transition:all 0.5s
}
// 彈框彈出的動畫結束,即顯示在頁面底部
.slide-enter-to{
    transform: translate3d(0,0,0)
}
// 點擊隱藏彈框的動畫
// 彈框隱藏前的樣式，此時在頁面底部
.slide-leave{
    transform: translate3d(0,100%,0)
}
// 彈框從上往下滑的過渡效果
.slide-leave-active{
    transition:all 0.5s
}
// 彈框滑出頁面底部即隱藏:這一步驟的樣式能夠忽略不寫，由於在slide-leave-to這個狀態時v-leave的樣式已經被刪除 v-show爲false彈框隱藏,彈框隱藏的樣式
.slide-leave-to{
     transform: translate3d(0,100%,0)
}

有時候過渡元素時須要條件渲染，若是渲染的兩個標籤是相同的，須要用key惟一值來區別。代碼以下

<transition>
    <div>
        <button v-if="flag" :key="submit">submit</button>
        <button v-else :key="cancel">cancel</button>    
    </div>    
</transition>

假如在這個基礎下增長一個需求，先隱藏submit按鈕再顯示cancel，即離開和開始的動畫同時進行。能夠使用過渡模式來解決問題。
mode="out-in" 當前元素先進行過渡，過渡結束後新元素再進行過渡
mode="in-out" 新元素先進行過渡，過渡結束當前元素再過渡

過渡列表

除了單個標籤過渡外，在實際開發中確定還會涉及到列表過渡。例如往一個列表添加或刪除一條數據。
例以下圖，動態添加或刪除一個數組中的數字，插入的數字和原有的都要有一個過渡的動畫。在這種狀況下須要使用<transition-group><transition-group>過渡組件，具體代碼以下

組件的結構以下

<template>
    <div class="number-wrapper">
        <button @click="add">add</button>
        <button @click="remove">remove</button>
        <div class="list">
            <transition-group name="fade">
                //注意，在transition-group下:key的值不可以是index
                <span v-for="(item) in list" :key="item" class="item">{{item}}</span>
            </transition-group>
        </div>
    </div>
</template>

js代碼

<script>
export default {
  data () {
    return {
      list: [1]
    }
  },
  methods: {
    add () {
      // 獲取當前數組長度
      let num = this.list.length
      // 獲取隨機位置
      let index = Math.floor(Math.random() * num)
      // 添加下一個數字到隨機位置
      this.list.splice(index, 0, num + 1)
    },
    remove () {
      let num = this.list.length
      let index = Math.floor(Math.random() * num)
      //隨機移除一個數字
      this.list.splice(index, 1)
    }
  }
}
</script>

css部分

.fade-enter,
    .fade-leave-to
     opacity:0
     transform:translateY(20px)
    .fade-leave-active
     position: absolute
    .item
        margin-right: 10px
        display: inline-block
        transition: all 0.5s