關(guān)于在vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的代碼示例
1. 你知道什么是過(guò)渡動(dòng)畫(huà)嗎
過(guò)渡動(dòng)畫(huà)是指在 DOM 元素從一個(gè)狀態(tài)到另一個(gè)狀態(tài)發(fā)生變化時(shí),通過(guò)添加過(guò)渡效果使得這個(gè)變化看起來(lái)更加平滑自然的動(dòng)畫(huà)效果。在 Vue 中,過(guò)渡動(dòng)畫(huà)可以應(yīng)用到以下幾個(gè)場(chǎng)景中:
- 顯示和隱藏元素
- 動(dòng)態(tài)添加或刪除元素
- 元素位置的變化
2. Vue 過(guò)渡動(dòng)畫(huà)的實(shí)現(xiàn)方法
2.1 CSS 過(guò)渡
Vue 提供了 transition
組件來(lái)支持過(guò)渡動(dòng)畫(huà)。我們可以在需要應(yīng)用過(guò)渡動(dòng)畫(huà)的元素外層包裹一個(gè) transition
組件,并通過(guò)設(shè)置 CSS 樣式或綁定動(dòng)態(tài) class 來(lái)實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的效果。
Vue 的過(guò)渡動(dòng)畫(huà)通過(guò)添加 CSS 類(lèi)名來(lái)實(shí)現(xiàn)。我們可以通過(guò)為需要過(guò)渡的元素添加 v-if
或 v-show
指令來(lái)控制元素的顯示和隱藏,然后使用 transition
組件進(jìn)行動(dòng)畫(huà)效果的設(shè)置。
下面我寫(xiě)個(gè)示例給大家參考一下,我將給按鈕添加過(guò)渡動(dòng)畫(huà)效果:
<template> <button @click="show=!show">Toggle</button> <transition name="fade"> <div v-if="show">Hello, World!</div> </transition> </template> <script> export default { data() { return { show: false }; } }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
在上面的代碼思路中,我們?cè)?transition
包裹的 div
元素上使用了 v-if
指令來(lái)控制元素的顯示和隱藏。同時(shí),我們給 transition
組件添加了一個(gè) name
屬性,并使用 CSS 樣式來(lái)定義過(guò)渡動(dòng)畫(huà)的效果。其中,.fade-enter-active
和 .fade-leave-active
分別表示進(jìn)入和離開(kāi)時(shí)的過(guò)渡動(dòng)畫(huà),而 .fade-enter
和 .fade-leave-to
則分別表示進(jìn)入和離開(kāi)時(shí)元素的樣式。
2.2 JS 過(guò)渡
除了使用 CSS 過(guò)渡外,在 Vue 中也可以使用 JavaScript 過(guò)渡來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。JS 過(guò)渡相比于 CSS 過(guò)渡的優(yōu)勢(shì)在于它可以更加靈活地控制過(guò)渡動(dòng)畫(huà)。
它與 CSS 過(guò)渡不同,Javascript 過(guò)渡可以更加靈活地控制過(guò)渡動(dòng)畫(huà),可以實(shí)現(xiàn)更加豐富的效果。Vue 提供了事件鉤子函數(shù),使得我們可以自定義過(guò)渡動(dòng)畫(huà)的效果。
Vue 中提供了以下事件鉤子函數(shù):
before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled
我們可以使用 transition
組件的 mode
屬性來(lái)設(shè)置過(guò)渡的模式,如果使用了 mode
屬性,Vue 將會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的鉤子函數(shù),我們可以通過(guò)這些鉤子函數(shù)來(lái)自定義過(guò)渡效果。
下面是我寫(xiě)的一個(gè)基于 JS 過(guò)渡的演示Demo,我們將為按鈕添加自定義的過(guò)渡動(dòng)畫(huà):
<template> <button @click="show=!show">Toggle</button> <transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave"> <div v-if="show">Hello, World!</div> </transition> </template> <script> export default { data() { return { show: false }; }, methods: { beforeEnter(el) { el.style.opacity = 0; el.style.transformOrigin = 'left'; }, enter(el, done) { anime({ targets: el, opacity: 1, translateX: [20, 0], easing: 'easeInOutQuad', duration: 500, complete: done }); }, leave(el, done) { anime({ targets: el, opacity: 0, translateX: [-20, 0], easing: 'easeInOutQuad', duration: 500, complete: done }); } } }; </script>
在上面的前端頁(yè)面中,我們通過(guò)設(shè)置 transition
組件的 css
屬性為 false
來(lái)禁用 CSS 過(guò)渡,然后我們使用了 before-enter
、enter
和 leave
等鉤子函數(shù)來(lái)自定義過(guò)渡動(dòng)畫(huà)。在這個(gè)示例代碼中,我們使用了第三方動(dòng)畫(huà)庫(kù) Anime.js 來(lái)實(shí)現(xiàn)元素進(jìn)入和離開(kāi)時(shí)的動(dòng)畫(huà)效果,同時(shí)在 anime
動(dòng)畫(huà)完成后,我們還需要手動(dòng)調(diào)用 done
函數(shù)來(lái)告知 Vue 過(guò)渡動(dòng)畫(huà)已經(jīng)完成。
3. 小結(jié)一下
通過(guò)我寫(xiě)的這篇文章的介紹,可以讓大家多了解了 Vue 過(guò)渡動(dòng)畫(huà)的基本概念,并且掌握了如何在 Vue 中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)。不論是使用 CSS 過(guò)渡還是 JavaScript 過(guò)渡,都可以幫助我們?yōu)橛脩?hù)提供更加友好的用戶(hù)體驗(yàn)。我希望本文對(duì)您有所幫助,如果您有任何疑問(wèn)或建議,歡迎在評(píng)論區(qū)留言。
以上就是關(guān)于在vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的代碼示例的詳細(xì)內(nèi)容,更多關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue使用new Image()實(shí)現(xiàn)圖片預(yù)加載功能
這篇文章主要介紹了如何在 Vue 中實(shí)現(xiàn)圖片預(yù)加載的一個(gè)簡(jiǎn)單小demo以及優(yōu)化方案,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-11-11vue限制文本輸入框只允許輸入字母、數(shù)字、禁止輸入特殊字符
這篇文章主要介紹了vue限制文本輸入框只允許輸入字母、數(shù)字、不允許輸入特殊字符,通過(guò)監(jiān)聽(tīng)表單輸入的內(nèi)容,使用方法的缺陷,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10vue+highcharts實(shí)現(xiàn)3D餅圖效果
這篇文章主要為大家詳細(xì)介紹了vue+highcharts實(shí)現(xiàn)3D餅圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue 解決data中定義圖片相對(duì)路徑頁(yè)面不顯示的問(wèn)題
這篇文章主要介紹了vue 解決data中定義圖片相對(duì)路徑頁(yè)面不顯示的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue使用el-table篩選tree樹(shù)形結(jié)構(gòu)的數(shù)據(jù)問(wèn)題
這篇文章主要介紹了vue使用el-table篩選tree樹(shù)形結(jié)構(gòu)的數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02