Vue中怎么創(chuàng)建一個(gè)可重用的Transition

這篇文章將為大家詳細(xì)講解有關(guān)Vue中怎么創(chuàng)建一個(gè)可重用的Transition，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了博野免費(fèi)建站歡迎大家使用！

原始transition組件和CSS

定義transition的最簡單方法是使用transition·或transition-group組件。這需要為transition定義一個(gè)name`和一些CSS。

看起來容易,對(duì)吧?然而，這種方法有一個(gè)問題。我們不能在另一個(gè)項(xiàng)目中真正重用這個(gè)transition。

封裝transition組件

如果我們將前面的邏輯封裝到一個(gè)組件中，并將其用作一個(gè)組件，結(jié)果會(huì)怎樣呢?

// FadeTransition.vue     // App.vue    

通過在transition組件中提供一個(gè)slot，我們幾乎可以像使用基本transition組件一樣使用它。這比前面的例子稍微好一點(diǎn)，但是如果我們想要傳遞其他特定于transition的prop，比如mode或者一些hook，該怎么辦呢

封裝的包裝器transition組件

幸運(yùn)的是，Vue  中有一個(gè)功能，使我們可以將用戶指定的所有額外props和監(jiān)聽器傳遞給我們的內(nèi)部標(biāo)簽/組件。如果你還不知道，則可以通過$attrs訪問額外傳遞的  props，并將它們與v-bind結(jié)合使用以將它們綁定為props。這同樣適用于通過$listeners進(jìn)行的事件，并通過v-on對(duì)其進(jìn)行應(yīng)用。

// FadeTransition.vue      // App.vue  ...     

   

「完整事例地址：https://codesandbox.io/s/yjl1wjyoy1?from-embed」

現(xiàn)在，我們可以傳遞普通transition組件可以接受的任何事件和支持，這使得我們的組件更加可重用。但為什么不更進(jìn)一步，增加通過 prop  輕松定制持續(xù)時(shí)間的可能性。

顯式持續(xù)時(shí)間 prop

Vue 為transition組件提供了一個(gè)duration prop，然而，它是為更復(fù)雜的動(dòng)畫鏈接而設(shè)計(jì)的，它幫助 Vue  正確地將它們鏈接在一起。

在我們的案例中，我們真正需要的是通過組件prop控制CSS  animation/transition。我們可以通過不在CSS中指定顯式的CSS動(dòng)畫持續(xù)時(shí)間，而是將其作為樣式來實(shí)現(xiàn)。我們可以借助transition  hook來做到這一點(diǎn)，該transition hook與組件生命周期 hook 非常相似，但是它們?cè)谶^渡所需元素之前和之后被調(diào)用。讓我們看看效果如何。

// FadeTransition.vue    

「完整事例地址：https://codesandbox.io/s/j4qnjvmwz9?from-embed」

現(xiàn)在，我們可以控制實(shí)際的可見過渡時(shí)間，這使我們可重用的過渡變得靈活且易于使用。但是，如何過渡多個(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。如果我們可以在相同的組件中這樣做，并公開一個(gè)將切換到transition-group實(shí)現(xiàn)的group  prop，那會(huì)怎么樣呢?幸運(yùn)的是，我們可以通過render函數(shù)或component和is屬性來實(shí)現(xiàn)這一點(diǎn)。

// FadeTransition.vue      // App.vue  ...