Vue實(shí)現(xiàn)過(guò)渡效果的示例分析-創(chuàng)新互聯(lián)
小編給大家分享一下Vue實(shí)現(xiàn)過(guò)渡效果的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
我們提供的服務(wù)有：
網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、
渭源ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的
渭源網(wǎng)站制作公司以一個(gè)toggle按鈕控制p元素顯隱為例，如果不使用過(guò)渡效果，則如下所示
Toggle
藍(lán)色理想
如果要為此加入過(guò)渡效果，則需要使用過(guò)渡組件transition
過(guò)渡組件
Vue提供了transition的封裝組件，下面代碼中，該過(guò)渡組件的名稱為'fade'
藍(lán)色理想
當(dāng)插入或刪除包含在transition組件中的元素時(shí)，Vue會(huì)自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 CSS 過(guò)渡或動(dòng)畫，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名
過(guò)渡類名
總共有6個(gè)(CSS)類名在enter/leave的過(guò)渡中切換
v-enter
定義進(jìn)入過(guò)渡的開始狀態(tài)。在元素被插入時(shí)生效，在下一個(gè)幀移除
v-enter-active
定義過(guò)渡的狀態(tài)。在元素整個(gè)過(guò)渡過(guò)程中作用，在元素被插入時(shí)生效，在 transition 或 animation 完成之后移除。 這個(gè)類可以被用來(lái)定義過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)
v-enter-to
定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入一幀后生效(與此同時(shí) v-enter 被刪除)，在 transition 或 animation 完成之后移除
v-leave
定義離開過(guò)渡的開始狀態(tài)。在離開過(guò)渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除
v-leave-active
定義過(guò)渡的狀態(tài)。在元素整個(gè)過(guò)渡過(guò)程中作用，在離開過(guò)渡被觸發(fā)后立即生效，在 transition 或 animation 完成之后移除。 這個(gè)類可以被用來(lái)定義過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)
v-leave-to
定義離開過(guò)渡的結(jié)束狀態(tài)。在離開過(guò)渡被觸發(fā)一幀后生效(與此同時(shí) v-leave 被刪除)，在 transition 或 animation 完成之后移除
對(duì)于這些在 enter/leave 過(guò)渡中切換的類名，v- 是這些類名的前綴，表示過(guò)渡組件的名稱。比如，如果使用 ，則 v-enter替換為 my-transition-enter
transition
常用的Vue過(guò)渡效果都是使用CSS過(guò)渡transition，下面增加一個(gè)enter時(shí)透明度變化，leave時(shí)位移變化的效果
Toggle
藍(lán)色理想
animation
CSS動(dòng)畫animation用法同CSS過(guò)渡transition，區(qū)別是在動(dòng)畫中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會(huì)立即刪除，而是在 animationend 事件觸發(fā)時(shí)刪除
下面例子中，在元素enter和leave時(shí)都增加縮放scale效果
Toggle
藍(lán)色理想
同時(shí)使用Vue 為了知道過(guò)渡的完成，必須設(shè)置相應(yīng)的事件監(jiān)聽(tīng)器。它可以是 transitionend 或 animationend ，這取決于給元素應(yīng)用的 CSS 規(guī)則。如果使用其中任何一種，Vue 能自動(dòng)識(shí)別類型并設(shè)置監(jiān)聽(tīng)。
但是，在一些場(chǎng)景中，需要給同一個(gè)元素同時(shí)設(shè)置兩種過(guò)渡動(dòng)效，比如 animation 很快的被觸發(fā)并完成了，而 transition 效果還沒(méi)結(jié)束。在這種情況中，就需要使用 type 特性并設(shè)置 animation 或 transition 來(lái)明確聲明需要 Vue 監(jiān)聽(tīng)的類型
自定義類名的優(yōu)先級(jí)高于普通的類名，這對(duì)于Vue的過(guò)渡系統(tǒng)和其他第三方CSS動(dòng)畫庫(kù)，如 Animate.css 結(jié)合使用十分有用
在很多情況下，Vue可以自動(dòng)得出過(guò)渡效果的完成時(shí)機(jī)。默認(rèn)情況下，Vue會(huì)等待其在過(guò)渡效果的根元素的第一個(gè) transitionend 或 animationend 事件。然而也可以不這樣設(shè)定——比如，可以擁有一個(gè)精心編排的一序列過(guò)渡效果，其中一些嵌套的內(nèi)部元素相比于過(guò)渡效果的根元素有延遲的或更長(zhǎng)的過(guò)渡效果
下面的代碼意味著元素在進(jìn)入enter和離開leave時(shí)，持續(xù)時(shí)間都為1s，而無(wú)論在樣式中它們的設(shè)置值為多少
重慶分公司
重慶分公司