vue.js過渡效果之--javascript鈎子

 

寫在前面

姊妹篇  vue.js之過渡效果-css。今天一篇博文閱讀量破300，心里還是有點小激動的。沒錯，我就是這么容易滿足（害羞）。這個數據可能連大牛一篇文章閱讀量的零頭都沒有，但這卻是我個人的一大步，因為我在幫助別人。當然我沒少受到別人文章的幫助。我想，也是大家這種樂於分享的心態讓編程在一堆代碼后面變得更加有人情味，前端變得更有意思。

什么是鈎子

我當初看到鈎子這個東西的時候也是一頭霧水，盡管鈎子這個翻譯最初可能是想平易近人的，不讓人望而生畏的。現在，就我的理解來說，鈎子函數就像埋在一條道路上的一個個地雷，當達到某個狀態的時候就會觸發。

以實例生命周期為例，把實例想象成一個人，一個實例的生命周期包括beforeCreate(出生前)，created(胚胎階段)，beforemount(分娩前)，mounted(出生了)，beforedestroy(掛之前)，destroyed(掛了)等，中間還有若干次update。這些階段就是可以放鈎子地雷的地方，哦，鈎子函數的地方。

再細化場景：要做一個天氣組件，數據要從api利用ajax請求得到，然后渲染到視圖，那么這個工作就要在組件生命周期的created階段進行，(

• created:實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

)否則在mounted,掛載到元素上時就會因為沒有數據而報錯。這就要給created掛一個函數，讓Vue在這個階段調用，去請求ajax。像下面這樣：

created：function() { 
            this.getWeather();//鈎子函數，組件創建完成時調用getWeather方法獲取天氣信息

        }

 

過渡的鈎子

 一個元素出現的過渡包括四個節點：before-enter，enter，after-enter，enter-cancelled，分別代表開始出現前，出現中，出現后。元素的離開也一樣。借助V-on可以在這些節點掛載鈎子函數，用於在元素過渡的各節點觸發這些函數。

出現前主要用於配置一些參數：如將opacity設置為0，enter是進入的動畫過程函數。同理before-leave是離開前的狀態設置，leave對應的是消失的過程函數

以上鈎子函數會被傳入被過渡元素el作為第一個參數。

//來自官網的代碼
<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>

 

剩下的就是看Velocity.js文檔了

還有我做(chao)的一個demo: