概述
在清原等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站,外貿(mào)營(yíng)銷網(wǎng)站建設(shè),清原網(wǎng)站建設(shè)費(fèi)用合理。
Vue 在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過渡效果。
包括以下工具:
單元素/組件的過度
Vue 提供了 transition 的封裝組件,在下列情形中,可以給任何元素和組件添加 entering/leaving 過渡
這里是一個(gè)典型的例子:
hello
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ì)看見文字淡入淡出的效果。
當(dāng)插入或刪除包含在 transition 組件中的元素時(shí),Vue 將會(huì)做以下處理:
過度的CSS類名
v-enter
: 定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時(shí)生效,在下一個(gè)幀移除。v-enter-active
: 定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用,在元素被插入時(shí)生效,在 transition/animation 完成之后移除。 這個(gè)類可以被用來定義過渡的過程時(shí)間,延遲和曲線函數(shù)。v-enter-to
: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入一幀后生效(于此同時(shí) v-enter 被刪除),在 transition/animation 完成之后移除。v-leave
: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)生效,在下一個(gè)幀移除。v-leave-active:
定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用,在離開過渡被觸發(fā)后立即生效,在 transition/animation 完成之后移除。 這個(gè)類可以被用來定義過渡的過程時(shí)間,延遲和曲線函數(shù)。v-leave-to
: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)一幀后生效(于此同時(shí) v-leave 被刪除),在 transition/animation 完成之后移除。對(duì)于這些在 enter/leave 過渡中切換的類名,v- 是這些類名的前綴。使用
CSS過度
常用的過渡都是使用 CSS 過渡。以下為示例代碼。
CSS 過渡
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)畫效果。
CSS動(dòng)畫
CSS 動(dòng)畫用法同 CSS 過渡,區(qū)別是在動(dòng)畫中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會(huì)立即刪除,而是在 animationend 事件觸發(fā)時(shí)刪除。
示例: (省略了兼容性前綴)
css 動(dòng)畫
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é)果:
自定義過渡類名
我們可以通過以下特性來自定義過渡類名:
他們的優(yōu)先級(jí)高于普通的類名,這對(duì)于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動(dòng)畫庫(kù),如 Animate.css 結(jié)合使用十分有用。
示例:
自定義過渡類名
new Vue({ el:'#app4', data:{ show:true } })
運(yùn)行結(jié)果:
animate.css的學(xué)習(xí)可以參考官網(wǎng):https://daneden.github.io/animate.css/
javascript鉤子
可以在屬性中聲明 JavaScript 鉤子
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) { // ... }, // -------- // 離開時(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 過渡的時(shí)候, 在 enter和leave 中,回調(diào)函數(shù) done 是必須的 。 否則,它們會(huì)被同步調(diào)用,過渡會(huì)立即完成。
推薦對(duì)于僅使用 JavaScript 過渡的元素添加 v-bind:css="false",Vue 會(huì)跳過 CSS 的檢測(cè)。這也可以避免過渡過程中 CSS 的影響。
一個(gè)使用 Velocity.js 的簡(jiǎn)單例子:
javascript 鉤子使用
運(yùn)行結(jié)果:
初始渲染的過度
可以通過appear 特性設(shè)置節(jié)點(diǎn)的在初始渲染的過渡
這里默認(rèn)和進(jìn)入和離開過渡一樣,同樣也可以自定義 CSS 類名。
自定義 JavaScript 鉤子:
示例代碼:
初始畫面
new Vue({ el:'#app6', data:{ show:true } })
運(yùn)行結(jié)果:
在界面加載該元素時(shí),會(huì)有個(gè)過渡效果。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。