一文搞懂Vue里的過(guò)渡和動(dòng)畫(huà)
過(guò)渡的 CSS 類名
Vue的過(guò)渡功能是通過(guò)添加CSS類名來(lái)實(shí)現(xiàn)過(guò)渡效果。在過(guò)渡過(guò)程中，Vue會(huì)根據(jù)不同的階段給元素添加不同的CSS類名，如v-enter、v-enter-active、v-leave、v-leave-active等。適用于需要在組件之間添加平滑過(guò)渡效果的場(chǎng)景，如淡入淡出、滑動(dòng)等。
<template>
<transition name="fade">
<p v-if="show">This is a fading element.</p>
</transition>
<button @click="toggleShow">Toggle Show</button>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
toggleShow() {
this.show = !this.show;
}
}
};
</script>條件過(guò)渡的 CSS 類名
Vue還支持根據(jù)條件動(dòng)態(tài)添加過(guò)渡的CSS類名?？梢允褂?code>:class綁定來(lái)根據(jù)條件動(dòng)態(tài)添加過(guò)渡的CSS類名，適用于根據(jù)條件動(dòng)態(tài)切換過(guò)渡效果的場(chǎng)景，根據(jù)不同的條件添加不同的過(guò)渡效果。
<template>
<transition :name="transitionName">
<p v-if="show">This is a dynamic transition element.</p>
</transition>
<button @click="toggleShow">Toggle Show</button>
</template>
<script>
export default {
data() {
return {
show: false,
transitionName: 'fade'
};
},
methods: {
toggleShow() {
this.show = !this.show;
this.transitionName = this.show ? 'slide' : 'fade';
}
}
};
</script>JavaScript 鉤子函數(shù)
Vue提供了一些JavaScript鉤子函數(shù)，用于在過(guò)渡過(guò)程中執(zhí)行自定義的JavaScript代碼?？梢允褂?code>beforeEnter、enter、afterEnter、beforeLeave、leave、afterLeave等鉤子函數(shù)來(lái)執(zhí)行自定義的過(guò)渡邏輯。適用于需要在過(guò)渡過(guò)程中執(zhí)行自定義的JavaScript邏輯的場(chǎng)景，如動(dòng)態(tài)修改元素樣式等。
<template>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<p v-if="show">This is a custom transition element.</p>
</transition>
<button @click="toggleShow">Toggle Show</button>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods() {
beforeEnter(el) {
console.log('Before Enter');
el.style.opacity = 0;
},
enter(el, done) {
console.log('Enter');
setTimeout(() => {
el.style.opacity = 1;
done();
}, 1000);
},
afterEnter(el) {
console.log('After Enter');
},
beforeLeave(el) {
console.log('Before Leave');
el.style.opacity = 1;
},
leave(el, done) {
console.log('Leave');
setTimeout(() => {
el.style.opacity = 0;
done();
}, 1000);
},
afterLeave(el) {
console.log('After Leave');
},
toggleShow() {
this.show = !this.show;
}
}
}
</script>列表過(guò)渡
Vue提供了專門的列表過(guò)渡功能，用于在列表中添加過(guò)渡效果?？梢允褂?code><transition-group>組件來(lái)包裹列表項(xiàng)，并使用v-move、v-enter、v-leave等CSS類名來(lái)定義列表項(xiàng)的過(guò)渡效果。 適用于在列表中添加過(guò)渡效果的場(chǎng)景，如列表項(xiàng)的漸顯、滑動(dòng)等過(guò)渡效果。
<template>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>
<button @click="addItem">Add Item</button>
</template>
<style>
.list-enter-active,
.list-leave-active {
transition: all 0.5s;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(20px);
}
</style>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' }
]
};
},
methods: {
addItem() {
const newItem = {
id: Date.now(),
text: 'New Item'
};
this.items.push(newItem);
}
}
};
</script>動(dòng)態(tài)過(guò)渡和動(dòng)畫(huà)：
Vue支持根據(jù)動(dòng)態(tài)數(shù)據(jù)來(lái)觸發(fā)過(guò)渡和動(dòng)畫(huà)效果。可以使用動(dòng)態(tài)綁定來(lái)根據(jù)數(shù)據(jù)的變化來(lái)觸發(fā)過(guò)渡和動(dòng)畫(huà)效果。適用于根據(jù)動(dòng)態(tài)數(shù)據(jù)觸發(fā)過(guò)渡和動(dòng)畫(huà)效果的場(chǎng)景.
<template>
<transition :name="transitionName">
<p v-if="show">This is a dynamic transition element.</p>
</transition>
<button @click="toggleShow">Toggle Show</button>
</template>
<script>
export default {
data() {
return {
show: false,
transitionName: ''
};
},
methods: {
toggleShow() {
this.show = !this.show;
this.transitionName = this.show ? 'fade' : 'slide';
}
}
};
</script>自定義過(guò)渡和動(dòng)畫(huà)
Vue允許自定義過(guò)渡和動(dòng)畫(huà)效果，以滿足特定的需求。可以使用<transition>和<transition-group>組件的屬性和事件來(lái)自定義過(guò)渡和動(dòng)畫(huà)效果。適用于需要自定義過(guò)渡和動(dòng)畫(huà)效果的場(chǎng)景，通過(guò)自定義CSS樣式和JavaScript鉤子函數(shù)來(lái)實(shí)現(xiàn)特定的過(guò)渡和動(dòng)畫(huà)效果。
<template>
<transition
name="custom-transition"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<p v-if="show">This is a custom transition element.</p>
</transition>
<button @click="toggleShow">Toggle Show</button>
</template>
<style>
.custom-transition-enter-active,
.custom-transition-leave-active {
transition: opacity 0.5s, transform 0.5s;
}
.custom-transition-enter,
.custom-transition-leave-to {
opacity: 0;
transform: translateY(20px);
}
</style>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
el.style.transform = 'translateY(20px)';
},
enter(el, done) {
setTimeout(() => {
el.style.opacity = 1;
el.style.transform = 'translateY(0)';
done();
}, 1000);
},
afterEnter(el) {
// 執(zhí)行進(jìn)入后的操作
},
beforeLeave(el) {
// 執(zhí)行離開(kāi)前的操作
},
leave(el, done) {
setTimeout(() => {
el.style.opacity = 0;
el.style.transform = 'translateY(20px)';
done();
}, 1000);
},
afterLeave(el) {
// 執(zhí)行離開(kāi)后的操作
},
toggleShow() {
this.show = !this.show;
}
}
};
</script>這些示例涵蓋了不同的過(guò)渡和動(dòng)畫(huà)應(yīng)用場(chǎng)景，可以根據(jù)具體的需求和場(chǎng)景選擇適合的示例。
以上就是一文搞懂Vue里的過(guò)渡和動(dòng)畫(huà)的詳細(xì)內(nèi)容，更多關(guān)于Vue 過(guò)渡和動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動(dòng)實(shí)現(xiàn)定位、顏色過(guò)渡動(dòng)畫(huà)效果的代碼
- Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果實(shí)例詳解
- Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果示例代碼
- 十分鐘帶你快速上手Vue3過(guò)渡動(dòng)畫(huà)
- vue實(shí)現(xiàn)列表滾動(dòng)的過(guò)渡動(dòng)畫(huà)
- vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果
- vue 組件中使用 transition 和 transition-group實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)
相關(guān)文章
vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue的全局提示框組件實(shí)例代碼,需要的朋友可以參考下2018-02-02
element ui表格實(shí)現(xiàn)下拉篩選功能
這篇文章主要為大家詳細(xì)介紹了element ui表格實(shí)現(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式
這篇文章主要介紹了Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù)
這篇文章主要介紹了Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了如何給vant的Calendar日歷組件添加備注，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Vue中$props、$attrs和$listeners的使用方法
本文主要介紹了Vue中$props、$attrs和$listeners的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了vue 獲取元素額外生成的data-v-xxx操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
解決vue組件渲染沒(méi)更新數(shù)據(jù)問(wèn)題
本文主要介紹了解決vue組件渲染沒(méi)更新數(shù)據(jù)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
使用vue2實(shí)現(xiàn)購(gòu)物車和地址選配功能
這篇文章主要介紹了使用vue2實(shí)現(xiàn)購(gòu)物車和地址選配功能,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03