JavaScript 鉤子
點擊打開視頻講解更加詳細
可以在 attribute 中宣告 JavaScript 鉤子
完整案例：
<template>
<div id="app">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<!-- JavaScript 鉤子 -->
<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"
>
<p v-if="show">hello</p>
</transition>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
show: true
}
},
mounted() {
},
components:{
},
methods:{
// --------
// 進入中
// --------
beforeEnter: function (el) {
console.log('beforeEnter')
},
// 當與 CSS 結合使用時
// 回呼函式 done 是可選的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時
// --------
beforeLeave: function (el) {
console.log('beforeLeave')
},
// 當與 CSS 結合使用時
// 回呼函式 done 是可選的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
}
</script>
<style scoped>
</style>
這些鉤子函式可以結合 CSS transitions/animations 使用，也可以單獨使用，
注意：當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回呼，否則，它們將被同步呼叫，過渡會立即完成，
推薦對于僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測，這也可以避免過渡程序中 CSS 的影響，
使用 Velocity.js 完整案例：
<!--
Velocity 和 jQuery.animate 的作業方式類似，也是用來實作 JavaScript 影片的一個很棒的選擇
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
new Vue({
el: '#example-4',
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 })
}
}
})
若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504742.html
標籤：其他
上一篇：在奏鳴曲中設定日期的默認值
下一篇：引導5.2不可用