您好,登錄后才能下訂單哦!
這篇文章主要講解了在Vue中如何創(chuàng)建可重用的Transition的代碼實(shí)例,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
Vue.js中的transition確實(shí)很棒。毫無(wú)疑問(wèn),它們可以非常輕松地讓?xiě)?yīng)用程序栩栩如生,但是通常必須在每個(gè)項(xiàng)目中從頭開(kāi)始編寫(xiě)它們,甚至還需要引入animate.css之類(lèi)的CSS庫(kù)來(lái)使它們功能更強(qiáng)大。
如果我們可以將它們封裝到組件中,并在多個(gè)項(xiàng)目中簡(jiǎn)單地重用它們,結(jié)果會(huì)怎樣呢?我們將介紹幾種定義transition的方法,并深入研究如何使它們真正可重用。
原始transition組件和CSS
定義transition的最簡(jiǎn)單方法是使用transition·或transition-group組件。這需要為transition定義一個(gè)name`和一些CSS。
<template> <div id="app"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> </template> <script> export default { name: "App", data() { return { show: true }; } }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
看起來(lái)容易,對(duì)吧?然而,這種方法有一個(gè)問(wèn)題。我們不能在另一個(gè)項(xiàng)目中真正重用這個(gè)transition。
封裝transition組件
如果我們將前面的邏輯封裝到一個(gè)組件中,并將其用作一個(gè)組件,結(jié)果會(huì)怎樣呢?
// FadeTransition.vue <template> <transition name="fade"> <slot></slot> </transition> </template> <script> export default { }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> // App.vue <template> <div id="app"> <button v-on:click="show = !show"> Toggle transition </button> <fade-transition> <div v-if="show" class="box"></div> </fade-transition> </div> </template> <script>...</script> <style>...</style>
通過(guò)在transition組件中提供一個(gè)slot,我們幾乎可以像使用基本transition組件一樣使用它。這比前面的例子稍微好一點(diǎn),但是如果我們想要傳遞其他特定于transition的prop,比如mode或者一些hook,該怎么辦呢
封裝的包裝器transition組件
幸運(yùn)的是,Vue 中有一個(gè)功能,使我們可以將用戶指定的所有額外props和監(jiān)聽(tīng)器傳遞給我們的內(nèi)部標(biāo)簽/組件。如果你還不知道,則可以通過(guò)$attrs訪問(wèn)額外傳遞的 props,并將它們與v-bind結(jié)合使用以將它們綁定為props。這同樣適用于通過(guò)$listeners進(jìn)行的事件,并通過(guò)v-on對(duì)其進(jìn)行應(yīng)用。
// FadeTransition.vue <template> <transition name="fade" v-bind="$attrs" v-on="$listeners"> <slot></slot> </transition> </template> <script> export default {}; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> // App.vue ... <fade-transition mode="out-in"> <div key="blue" v-if="show" class="box"></div> <div key="red" v-else class="red-box"></div> </fade-transition> ...
「完整事例地址:https://codesandbox.io/s/yjl1wjyoy1?from-embed 」
現(xiàn)在,我們可以傳遞普通transition組件可以接受的任何事件和支持,這使得我們的組件更加可重用。但為什么不更進(jìn)一步,增加通過(guò) prop 輕松定制持續(xù)時(shí)間的可能性。
顯式持續(xù)時(shí)間 prop
Vue 為transition組件提供了一個(gè)duration prop,然而,它是為更復(fù)雜的動(dòng)畫(huà)鏈接而設(shè)計(jì)的,它幫助 Vue 正確地將它們鏈接在一起。
在我們的案例中,我們真正需要的是通過(guò)組件prop控制CSS animation/transition。我們可以通過(guò)不在CSS中指定顯式的CSS動(dòng)畫(huà)持續(xù)時(shí)間,而是將其作為樣式來(lái)實(shí)現(xiàn)。我們可以借助transition hook來(lái)做到這一點(diǎn),該transition hook與組件生命周期 hook 非常相似,但是它們?cè)谶^(guò)渡所需元素之前和之后被調(diào)用。讓我們看看效果如何。
// FadeTransition.vue <template> <transition name="fade" enter-active-class="fadeIn" leave-active-class="fadeOut" v-bind="$attrs" v-on="hooks"> <slot></slot> </transition> </template> <script> export default { props: { duration: { type: Number, default: 300 } }, computed: { hooks() { return { beforeEnter: this.setDuration, afterEnter: this.cleanUpDuration, beforeLeave: this.setDuration, afterLeave: this.cleanUpDuration, ...this.$listeners }; } }, methods: { setDuration(el) { el.style.animationDuration = `${this.duration}ms`; }, cleanUpDuration(el) { el.style.animationDuration = ""; } } }; </script> <style> @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } </style>
「完整事例地址:https://codesandbox.io/s/j4qnjvmwz9?from-embed 」
現(xiàn)在,我們可以控制實(shí)際的可見(jiàn)過(guò)渡時(shí)間,這使我們可重用的過(guò)渡變得靈活且易于使用。但是,如何過(guò)渡多個(gè)元素(如列表項(xiàng))呢?
Transition group 支持
你想到的最直接的方法可能是創(chuàng)建一個(gè)新組件,比如fade-transition-group,然后將當(dāng)前transition標(biāo)簽替換為transition-group標(biāo)簽,以實(shí)現(xiàn) group transition。如果我們可以在相同的組件中這樣做,并公開(kāi)一個(gè)將切換到transition-group實(shí)現(xiàn)的group prop,那會(huì)怎么樣呢?幸運(yùn)的是,我們可以通過(guò)render函數(shù)或component和is屬性來(lái)實(shí)現(xiàn)這一點(diǎn)。
// FadeTransition.vue <template> <component :is="type" :tag="tag" enter-active-class="fadeIn" leave-active-class="fadeOut" move-class="fade-move" v-bind="$attrs" v-on="hooks"> <slot></slot> </component> </template> <script> export default { props: { duration: { type: Number, default: 300 }, group: { type: Boolean, default: false }, tag: { type: String, default: "div" } }, computed: { type() { return this.group ? "transition-group" : "transition"; }, hooks() { return { beforeEnter: this.setDuration, afterEnter: this.cleanUpDuration, beforeLeave: this.setDuration, afterLeave: this.cleanUpDuration, leave: this.setAbsolutePosition, ...this.$listeners }; } }, methods: { setDuration(el) { el.style.animationDuration = `${this.duration}ms`; }, cleanUpDuration(el) { el.style.animationDuration = ""; }, setAbsolutePosition(el) { if (this.group) { el.style.position = "absolute"; } } } }; </script> <style> @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } .fade-move { transition: transform 0.3s ease-out; } </style> // App.vue ... <div class="box-wrapper"> <fade-transition group :duration="300"> <div class="box" v-for="(item, index) in list" @click="remove(index)" :key="item" > </div> </fade-transition> </div> ...
[文檔中][6]介紹了一個(gè)帶有transition-group元素的警告。我們基本上必須在元素離開(kāi)時(shí)將每個(gè)項(xiàng)目的定位設(shè)置為absolute,以實(shí)現(xiàn)其他項(xiàng)目的平滑移動(dòng)動(dòng)畫(huà)。我們也必須添加一個(gè)move-class并手動(dòng)指定過(guò)渡持續(xù)時(shí)間,因?yàn)闆](méi)有用于移動(dòng)的 JS hook。我們將這些調(diào)整添加到我們的上一個(gè)示例中。
再做一些調(diào)整,通過(guò)在mixin中提取 JS 邏輯,我們可以將其應(yīng)用于輕松創(chuàng)建新的transition組件,只需將其放入下一個(gè)項(xiàng)目中即可。
Vue Transition
在此之前描述的所有內(nèi)容基本上都是這個(gè)小型 [transition 集合][7]所包含的內(nèi)容。它有 10 個(gè)封裝的transition組件,每個(gè)約1kb(縮小)。我認(rèn)為它非常方便,可以輕松地在不同的項(xiàng)目中使用。你可以試一試:)
看完上述內(nèi)容,是不是對(duì)在Vue中如何創(chuàng)建可重用的Transition的代碼實(shí)例有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。