vue內置組件-transtion

1、動畫過渡

關於動畫部分，通常是css3的transtion、transform和animation，這部分能夠參考w3school上的內容。

2、vue的內置組件

vue的內置組件一共有五個（截至到目前vue2.x），這裏主要介紹的是過渡組件<transition>和<transition-group>（官方文檔）。

一、經常使用情形

• 條件渲染 v-if
• 條件顯示 v-show
• 動態組件 <component :is="xxx">
• 組件根節點

二、<transition>的渲染

<transition name="fade">
    <p v-if="show">test</p>
</transtion>

new Vue({
   el:"#demo",
   data(){
        return{
            show: true;
        }
    } 
}) 

.fade-enter-active, .fade-leave-active{
  transition: all 1s ease-in-out;  
}

.fade-enter, .fade-leave-to{
  opacity: 0;  
}

三、<transition>的標籤屬性、事件

四、<transition-group>

<transition>可用於渲染v-if，v-show，v-if/v-else的元素，可是渲染v-if/v-else時若是是同名標籤（如都是<div>）也須要指明key值

<transition-group>用於渲染v-for的元素，如整個列表的渲染，可是渲染時每一個子節點都應該有本身的key值

3、鉤子函數

<transition>和<transition-group>都有本身的事件屬性，可使用v-on指令指定對應的js函數

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 進入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回調函數 done 是可選的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 離開時
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回調函數 done 是可選的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用於 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。不然，它們將被同步調用，過渡會當即完成。

對於僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也能夠避免過渡過程當中 CSS 的影響。

 4、過渡模式

在vue的transition組件中，離開和進入是同時發生的，這意味着兩個元素會同時存在一段時間，若是想避免這種狀況，可使用過渡模式<transition mode='in-out'>來渲染，過渡模式有如下兩種：

• in-out：新元素先進行過渡，完成以後當前元素過渡離開。

• out-in：當前元素先進行過渡，完成以後新元素過渡進入。