Vue過渡效果之JS過渡

標籤：for   his   rip   latex   bind   注意   ext   border   ati   

前面的話

　　與CSS過渡不同，JS過渡主要通過事件進行觸發。本文將詳細介紹Vue過渡效果之JS過渡

 

事件鉤子

　　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>

　　下面各個方法中，函數中的參數el表示要過渡的元素，可以設定不同情況下，el的位置、顏色等來控制其動畫的改變

// ...methods: {  // --------  // 進入中  // --------  beforeEnter: function (el) {    // ...  },  // 此回呼函數是可選項的設定  // 與 CSS 結合時使用  enter: function (el, done) {    // ...    done()  },  afterEnter: function (el) {    // ...  },  enterCancelled: function (el) {    // ...  },  // --------  // 離開時  // --------  beforeLeave: function (el) {    // ...  },  // 此回呼函數是可選項的設定  // 與 CSS 結合時使用  leave: function (el, done) {    // ...    done()  },  afterLeave: function (el) {    // ...  },  // leaveCancelled 只用於 v-show 中  leaveCancelled: function (el) {    // ...  }}

　　上面方法中，有兩個方法比較特殊，是enter()和leave()方法，它們接受了第二個參數done。當進入完畢或離開完畢後，會調用done()方法來進行接下來的操作

　　[注意]對於僅使用JS過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響

【簡單案例】

　　下面是一個JS過渡的簡單案例

<div id="demo">  <button @click="show = !show">Toggle</button>  <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" :css="false">    <p v-if="show">Demo</p>  </transition></div>

<script>new Vue({  el: ‘#demo‘,  data: {    show: false  },  methods: {    beforeEnter: function (el) {      el.style.opacity = 0      el.style.transformOrigin = ‘left‘    },    enter: function (el, done) {      Velocity(el, { opacity: 1, fontSize: ‘1.4em‘ }, { duration: 300 })      Velocity(el, { fontSize: ‘1em‘ }, { complete: done })    },    leave: function (el, done) {      Velocity(el, { translateX: ‘15px‘, rotateZ: ‘50deg‘ }, { duration: 600 })      Velocity(el, { rotateZ: ‘100deg‘ }, { loop: 2 })      Velocity(el, {rotateZ: ‘45deg‘,translateY: ‘30px‘,translateX: ‘30px‘,opacity: 0}, {complete: done })    }  }})  </script>

 

初始渲染過渡

　　可以通過 appear 特性設定節點的在初始渲染的過渡，自訂 JavaScript 鉤子

<transition  appear  v-on:before-appear="customBeforeAppearHook"  v-on:appear="customAppearHook"  v-on:after-appear="customAfterAppearHook"  v-on:appear-cancelled="customAppearCancelledHook">  <!-- ... --></transition>

　　下面是一個例子

<div id="demo">  <button @click="reset">還原</button>  <transition appear  :appear="customAppearHook">    <p>小火柴的藍色理想</p>  </transition></div>

<script>new Vue({  el: ‘#demo‘,  methods:{    reset(){      history.go();    },     customAppearHook(el, done) {      Velocity(el, {backgroundColor:"#ddd",translateX:200});      Velocity(el,"reverse",{complete:done})    },   }})</script>

 

Vue過渡效果之JS過渡