Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過(guò)度
概述
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果。
包括以下工具：
- 在 CSS 過(guò)渡和動(dòng)畫(huà)中自動(dòng)應(yīng)用 class
- 可以配合使用第三方 CSS 動(dòng)畫(huà)庫(kù)，如 Animate.css
- 在過(guò)渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 動(dòng)畫(huà)庫(kù)，如 Velocity.js
單元素/組件的過(guò)度
Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加 entering/leaving 過(guò)渡
- 條件渲染 （使用 v-if）
- 條件展示 （使用 v-show）
- 動(dòng)態(tài)組件
- 組件根節(jié)點(diǎn)
這里是一個(gè)典型的例子：
<div id="app1">
<button @click="show = !show">toggle</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el:'#app1',
data:{
show:true
}
})
.fade-enter-active, .fade-leave-active{
transition: opacity 2s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
運(yùn)行結(jié)果如下：
點(diǎn)擊toggle按鈕會(huì)看見(jiàn)文字淡入淡出的效果。
當(dāng)插入或刪除包含在 transition 組件中的元素時(shí)，Vue 將會(huì)做以下處理：
- 自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 CSS 過(guò)渡或動(dòng)畫(huà)，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名。
- 如果過(guò)渡組件提供了 JavaScript 鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用。
- 如果沒(méi)有找到 JavaScript 鉤子并且也沒(méi)有檢測(cè)到 CSS 過(guò)渡/動(dòng)畫(huà)，DOM 操作（插入/刪除）在下一幀中立即執(zhí)行。(注意：此指瀏覽器逐幀動(dòng)畫(huà)機(jī)制，和Vue的 nextTick 概念不同)
過(guò)度的CSS類名
v-enter: 定義進(jìn)入過(guò)渡的開(kāi)始狀態(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: 2.1.8版及以上 定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入一幀后生效（于此同時(shí) v-enter 被刪除），在 transition/animation 完成之后移除。v-leave: 定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除。v-leave-active:定義過(guò)渡的狀態(tài)。在元素整個(gè)過(guò)渡過(guò)程中作用，在離開(kāi)過(guò)渡被觸發(fā)后立即生效，在 transition/animation 完成之后移除。 這個(gè)類可以被用來(lái)定義過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。v-leave-to: 2.1.8版及以上 定義離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)一幀后生效（于此同時(shí) v-leave 被刪除），在 transition/animation 完成之后移除。
對(duì)于這些在 enter/leave 過(guò)渡中切換的類名，v- 是這些類名的前綴。使用 <transition name="my-transition" 可以重置前綴，比如 v-enter 替換為 my-transition-enter。
CSS過(guò)度
常用的過(guò)渡都是使用 CSS 過(guò)渡。以下為示例代碼。
<div id="app2">
<button @click="show = !show">toggle css</button>
<transition name="slide-fade">
<p v-if="show">CSS 過(guò)渡</p>
</transition>
</div>
new Vue({
el:'#app2',
data:{
show:true
}
})
.slide-fade-enter-active{
transition: all .3s ease;
}
.slide-fade-leave-active{
transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.slide-fade-enter, .slide-fade-leave-to{
transform: translateX(100px);
opacity: 0;
}
運(yùn)行結(jié)果
點(diǎn)擊按鈕就會(huì)看到動(dòng)畫(huà)效果。
CSS動(dòng)畫(huà)
CSS 動(dòng)畫(huà)用法同 CSS 過(guò)渡，區(qū)別是在動(dòng)畫(huà)中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會(huì)立即刪除，而是在 animationend 事件觸發(fā)時(shí)刪除。
示例： (省略了兼容性前綴)
<div id="app3">
<button @click="show = !show">toggle css</button>
<transition name="bounce">
<p v-if="show">css 動(dòng)畫(huà)</p>
</transition>
</div>
new Vue({
el:'#app3',
data:{
show:true
}
})
.bounce-enter-active{
animation: bounce-in .5s;
}
.bounce-leave-active{
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
運(yùn)行結(jié)果：
自定義過(guò)渡類名
我們可以通過(guò)以下特性來(lái)自定義過(guò)渡類名：
- enter-class
- enter-active-class
- enter-to-class (>= 2.1.8 only)
- leave-class
- leave-active-class
- leave-to-class (>= 2.1.8 only)
他們的優(yōu)先級(jí)高于普通的類名，這對(duì)于 Vue 的過(guò)渡系統(tǒng)和其他第三方 CSS 動(dòng)畫(huà)庫(kù)，如 Animate.css 結(jié)合使用十分有用。
示例：
<link rel="external nofollow" rel="stylesheet" type="text/css">
<div id="app4">
<button @click="show = !show">toggle coustom class</button>
<transition name="bounce"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<p v-if="show">自定義過(guò)渡類名</p>
</transition>
</div>
new Vue({
el:'#app4',
data:{
show:true
}
})
運(yùn)行結(jié)果：
animate.css的學(xué)習(xí)可以參考官網(wǎng)：https://daneden.github.io/animate.css/
javascript鉤子
可以在屬性中聲明 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"> <!-- ... --> </transition>
methods: {
// --------
// 進(jìn)入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
// 與 CSS 結(jié)合時(shí)使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開(kāi)時(shí)
// --------
beforeLeave: function (el) {
// ...
},
// 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
// 與 CSS 結(jié)合時(shí)使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用，也可以單獨(dú)使用。
當(dāng)只用 JavaScript 過(guò)渡的時(shí)候， 在 enter和leave 中，回調(diào)函數(shù) done 是必須的 。 否則，它們會(huì)被同步調(diào)用，過(guò)渡會(huì)立即完成。
推薦對(duì)于僅使用 JavaScript 過(guò)渡的元素添加 v-bind:css="false"，Vue 會(huì)跳過(guò) CSS 的檢測(cè)。這也可以避免過(guò)渡過(guò)程中 CSS 的影響。
一個(gè)使用 Velocity.js 的簡(jiǎn)單例子：
<div id="app5">
<button @click="show = !show">toggle hook</button>
<transition @before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false">
<p v-if="show">javascript 鉤子使用</p>
</transition>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script >
new Vue({
el:'#app5',
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})
}
}
})
</script>
運(yùn)行結(jié)果：
初始渲染的過(guò)度
可以通過(guò)appear 特性設(shè)置節(jié)點(diǎn)的在初始渲染的過(guò)渡
這里默認(rèn)和進(jìn)入和離開(kāi)過(guò)渡一樣，同樣也可以自定義 CSS 類名。
<transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" appear-active-class="custom-appear-active-class"> <!-- ... --> </transition>
自定義 JavaScript 鉤子：
<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition>
示例代碼：
<!--初始渲染-->
<div id="app6">
<transition appear
appear-active-class="animated tada">
<p>初始畫(huà)面</p>
</transition>
</div>
new Vue({
el:'#app6',
data:{
show:true
}
})
運(yùn)行結(jié)果：
在界面加載該元素時(shí)，會(huì)有個(gè)過(guò)渡效果。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下2023-11-11
Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解
這篇文章主要介紹了Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可拖拽組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi),無(wú)論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01
vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法
本篇文章主要介紹了vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解
這篇文章主要介紹了vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
解決Vue中mounted鉤子函數(shù)獲取節(jié)點(diǎn)高度出錯(cuò)問(wèn)題
本篇文章給大家分享了如何解決Vue中mounted鉤子函數(shù)獲取節(jié)點(diǎn)高度出錯(cuò)問(wèn)題，對(duì)此有興趣的朋友可以參考學(xué)習(xí)下。2018-05-05
如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
本文詳細(xì)介紹了Vue3中的`onMounted`鉤子函數(shù)的前世今生,包括其在Vue2中的前身`mounted`鉤子,以及Vue3中使用Composition?API的`onMounted`鉤子的用法,文章涵蓋了`onMounted`的多種用法,感興趣的朋友跟隨小編一起看看吧2024-11-11
今天小編就為大家分享一篇vue實(shí)例中data使用return包裹的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08