欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于vue.js過(guò)渡css類(lèi)名的理解(推薦)

 更新時(shí)間:2017年04月10日 12:02:28   作者:流炎飛雪  
這篇文章主要介紹了關(guān)于vue.js過(guò)渡css類(lèi)名的理解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

首先附上官方文檔圖。

  總體就是在解釋v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠標(biāo)的mouseover和mouseout事件聯(lián)想在一起,在經(jīng)過(guò)多方的查找,總算是理解了,以下就是我所理解的意思,希望對(duì)路過(guò)的有所幫助,更希望路過(guò)的能幫我檢查檢查。

start:

  首先,通過(guò)一個(gè)例子來(lái)說(shuō)明,實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。

  結(jié)果:點(diǎn)擊按鈕,show=false時(shí),div消失;再次點(diǎn)擊,show=true,div用藍(lán)色逐漸變成橙色,過(guò)渡時(shí)間為3s。

  將樣式更改為:

  結(jié)果:點(diǎn)擊按鈕,show=false時(shí),div逐步從橙色變成藍(lán)色,過(guò)渡時(shí)間為3s。

  通過(guò)以上兩個(gè)例子,v-enter和v-leave的區(qū)別已經(jīng)顯而易見(jiàn)了。

  v-enter:定義目標(biāo)元素在消失后,又開(kāi)始出現(xiàn)時(shí)的狀態(tài);

  v-leave:定義目標(biāo)元素正準(zhǔn)備消失時(shí)的狀態(tài);

  但是以上兩個(gè)都是一瞬間的事情,就好比f(wàn)lash動(dòng)畫(huà)的一幀內(nèi)容,至于第二幀至結(jié)尾的內(nèi)容就交給v-enter-ative和v-leave-active了。

  v-enter-active:定義目標(biāo)元素出現(xiàn)在文檔中的最終狀態(tài)(最后一幀);

  v-leave-active:定義目標(biāo)元素離開(kāi)文檔時(shí)的最終狀態(tài)(最后一幀),展現(xiàn)完這一狀態(tài)后就消失了。

  另外,過(guò)渡的效果transition都定義在上面的兩個(gè)樣式中,也難怪官方文檔中v-enter-active和v-leave-active表示的是一段距離。

  注意:這兩個(gè)樣式一定要定義在對(duì)應(yīng)的v-enter或者v-leave之前,否則顯示是無(wú)效的。

以上所述是小編給大家介紹的關(guān)于vue.js過(guò)渡css類(lèi)名的理解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue開(kāi)發(fā)之不同瀏覽器的類(lèi)型判斷方式

    vue開(kāi)發(fā)之不同瀏覽器的類(lèi)型判斷方式

    這篇文章主要介紹了vue開(kāi)發(fā)之不同瀏覽器的類(lèi)型判斷方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue3 :deep()的使用教程

    vue3 :deep()的使用教程

    對(duì)應(yīng)前端小白來(lái)說(shuō),一看到:deep()這些模式的用法就不理解是啥意思,下面簡(jiǎn)單介紹一下:deep()是什么以及如何使用,感興趣的朋友跟隨小編一起看看吧
    2023-10-10
  • 詳細(xì)講解vue2+vuex+axios

    詳細(xì)講解vue2+vuex+axios

    在vue2項(xiàng)目中,組件間相互傳值或者后臺(tái)獲取的數(shù)據(jù)需要供多個(gè)組件使用的情況很多的情況下(后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)),那么就需要用vuex來(lái)管理這些。
    2017-05-05
  • vue-upload上傳圖片詳細(xì)使用方法

    vue-upload上傳圖片詳細(xì)使用方法

    這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說(shuō)明,文中有相關(guān)的代碼示例供大家參考,感興趣的小伙伴一起跟著小編來(lái)學(xué)習(xí)吧
    2023-05-05
  • vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程

    vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程

    這篇文章主要介紹了vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-06-06
  • Vue中的echarts圖表如何實(shí)現(xiàn)loading效果

    Vue中的echarts圖表如何實(shí)現(xiàn)loading效果

    這篇文章主要介紹了Vue中的echarts圖表如何實(shí)現(xiàn)loading效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vuejs如何解決瀏覽器切換頁(yè)面后setInterval計(jì)時(shí)器停止執(zhí)行的問(wèn)題

    vuejs如何解決瀏覽器切換頁(yè)面后setInterval計(jì)時(shí)器停止執(zhí)行的問(wèn)題

    setinterval()是定時(shí)調(diào)用的函數(shù),可按照指定的周期(以毫秒計(jì))來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式,這篇文章主要給大家介紹了關(guān)于vuejs如何解決瀏覽器切換頁(yè)面后setInterval計(jì)時(shí)器停止執(zhí)行的問(wèn)題,需要的朋友可以參考下
    2024-01-01
  • 使用vue的transition完成滑動(dòng)過(guò)渡的示例代碼

    使用vue的transition完成滑動(dòng)過(guò)渡的示例代碼

    這篇文章主要介紹了使用vue的transition完成滑動(dòng)過(guò)渡的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • vue webpack多頁(yè)面構(gòu)建的實(shí)例代碼

    vue webpack多頁(yè)面構(gòu)建的實(shí)例代碼

    這篇文章主要介紹了vue webpack多頁(yè)面構(gòu)建的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2018-09-09
  • vue如何截取字符串

    vue如何截取字符串

    這篇文章主要介紹了vue如何截取字符串,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05

最新評(píng)論