Vue中過度動畫效果應用
實現動畫必須要將要進行動畫的元素利用<transition>標籤進行包裹
1、利用CSS樣式實現過渡效果
<transition name="fade"></transition>
-
v-enter
: 定義進入過渡的開始狀態。在元素被插入時生效,在下一個幀移除。 -
v-enter-active
: 定義過渡的狀態。在元素整個過渡過程中作用,在元素被插入時生效,在transition/animation
完成之後移除。 這個類可以被用來定義過渡的過程時間,延遲和曲線函式。 -
v-enter-to
: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入一幀後生效(於此同時v-enter
transition/animation
完成之後移除。 -
v-leave
: 定義離開過渡的開始狀態。在離開過渡被觸發時生效,在下一個幀移除。 -
v-leave-active
: 定義過渡的狀態。在元素整個過渡過程中作用,在離開過渡被觸發後立即生效,在transition/animation
完成之後移除。 這個類可以被用來定義過渡的過程時間,延遲和曲線函式。 -
v-leave-to
: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發一幀後生效(於此同時v-leave
被刪除),在transition/animation
完成之後移除
(1)通過name的名稱進行重新命名,在樣式檔案中進行.fade-enter-active設定動畫的效果即transition屬性,需要注意的是動畫結束後樣式將會移除,所以如果想要動畫實現之後元素保持有某個樣式,則需要transition標籤裡面的元素的樣式表中進行設定,此情況是針對需要通過改變元素的屬性來顯示元素,如定位top,left以及通過transform將顯示的元素的位置改變從而讓元素出現在當前的檢視視窗中
<transition name="fold"> <div class="shopcart-list" v-show="listShow"> <div class="list-header"> <h1 class="title">購物車</h1> <span class="empty" @click="empty">清空</span> </div> <div class="list-content" ref="list"> <ul> <li class="food border-1px" v-for="(food,index) in selectFoods" v-show="food.count>0"> <span class="name">{{selectName[index]}}</span> <div class="price"> <span>¥{{food.price*food.count}}</span> </div> <div class="cartcontrol-wrapper"> <v-cartcontrol :food="food"></v-cartcontrol> </div> </li> </ul> </div> </div> </transition>
.fold-enter-active,.fold-leave-active transition:all 0.5s .fold-enter,.fold-leave transform :translate3d(0,0,0) .shopcart-list position:absolute transform:translate3d(0,-100%,0)//動畫結束後的效果需要在此處進行設定,設定在.fold-enter-active中,元素動畫結束後該樣式屬性會被移除掉,將會看不到想要的效果 top: 100%//元素即使顯示也不再檢視視窗中,通過transform實現顯示 z-index:-1 width:100%
(2)如果要設定元素出現和隱藏的動畫效果不一樣則可以分別設定樣式
HTML
<transition name="bounce">
<div v-show="showFlag" class="food"><div>
</transition>
CSS
.bounce-enter-active transition:all 0.4s linear transform:translate3d(0,0,0) .bounce-enter transform :translate3d(100%,0,0) .bounce-leave-active transition:all 0.4s linear transform:translate3d(100%,0,0) .bounce-leave transform:translate3d(0,0,0)
利用動畫animation也可以實現上面的效果
.bounce-enter-active animation :bounceIn 0.4s linear @keyframes bounceIn{ 0%{ transform :translate3d(100%,0,0) } 50%{ transform :translate3d(50%,0,0) } 100%{ transform :translate3d(0,0,0) } } .bounce-leave-active animation :bounceOut 0.4s linear @keyframes bounceOut{ 0%{ transform :translate3d(0,0,0) } 50%{ transform :translate3d(50%,0,0) } 100%{ transform :translate3d(100%,0,0) } }
2、利用animation或者是動畫庫實現動畫效果
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Look at me!</p>
</transition>
</div>
new Vue({ el: '#example-2', data: { show: true } })
.bounce-enter-active { animation: bounce-in 0.5s linear;//leave和enter的動畫效果不一樣 } .bounce-leave-active { animation: bounce-out 0.5s linear; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes bounce-out { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); } }
3、自定義過度類名
enter-class
enter-active-class
enter-to-class
(>= 2.1.8 only)leave-class
leave-active-class
leave-to-class
(>= 2.1.8 only)
他們的優先順序高於普通的類名,這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫,如 Animate.css 結合使用十分有用。
<link href="https://unpkg.com/[email protected]/animate.min.css" rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
new Vue({ el: '#example-3', data: { show: true } })
可以在樣式中同時使用transition和animation
4、利用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: { // -------- // 進入中 // -------- beforeEnter: function (el) { // ... }, // 此回撥函式是可選項的設定 // 與 CSS 結合時使用 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 離開時 // -------- beforeLeave: function (el) { // ... }, // 此回撥函式是可選項的設定 // 與 CSS 結合時使用 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用於 v-show 中 leaveCancelled: function (el) { // ... } }
在使用鉤子函式實現動畫的時候注意dom的非同步重新整理,需要結合this.$nextTick(),同時在leave和enter中設定樣式前最好迫使dom進行迴流(reflow)使dom重新渲染,如獲取元素的offsetHeight等,然後在this.$nextTick()中設定新的樣式,不然有可能實現不了動畫的效果.
相關推薦
Vue中過度動畫效果應用
一、實現動畫過渡效果的幾種方式 實現動畫必須要將要進行動畫的元素利用<transition>標籤進行包裹 1、利用CSS樣式實現過渡效果 <transition name="fade"></transition> v-enter: 定義
vue中封裝動畫元件(漸隱漸現效果)
<body> <div id="root"> <comp :dis="show"> <div>hello</div>
vue中css動畫原理
methods cli css樣式 第一個 內部 -c 顯示 opacity enter 顯示原理: <transition name=‘fade‘> <div v-if=‘show‘>hello world</div>
JQuery中的動畫效果
show() hide() slideUp slideDown fadeIn fadeOut animate : 自定義動畫 JQuery中的動畫效果.html <!DOCTYPE html> <html> <head> <m
vue中css動畫transition
動畫第一幀:v-enter v-leave 動畫最後一幀: v-enter-to v-leave-to 動畫屬性時間等過程:v-enter-active v-leave-active 如果沒有寫第一幀或最後一幀,那麼預設是動畫開始前的
05.vue中js動畫與Velocity.js的結合
vue中js動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js動畫</title> &l
Android中具有動畫效果的圖片資源
在一些場景下,圖片需要具有動畫效果。當你想顯示一個由多張圖片組成的loading動畫,或者一個圖示切換過程,就需要到具有動畫效果的圖片了。Android提供了幾種方式實現動畫圖片。 下面的是個示例: 第一種方式是使用Animation Drawable,這是通過建立多張靜態
vue.js trasition動畫效果,vue.js動畫
vue.js trasition動畫效果,vue.js動畫 ================================ ©Copyright 蕃薯耀 2018年12月07日 http://fanshuyao.iteye.com/ <
Vue中的動畫特效
Vue 在插入、更新或者移除 DOM 時,提供多種不同方式的應用過渡效果。 包括以下工具: 在 CSS 過渡和動畫中自動應用 class 可以配合使用第三方 CSS 動畫庫,如 Animate.css 在過渡鉤子函式中使用 JavaScript 直接操作 DOM 可以
通過JS和CSS,實現網頁載入中的動畫效果
需要材料: 一張loading動畫的gif圖片 基本邏輯: 模態框遮罩 + loading.gif動圖, 預設隱藏模態框 頁面開始傳送Ajax請求資料時,顯示模態框 請求完成,隱藏模態框
css實現載入中loading動畫效果
1.html<div class="load-container"> <div class="loader"></div> <p>載入中請稍後...</p> </div>2.css.load
jQuery中常用動畫效果函式(日常整理)
jQuery的效果函式列表: animate():對被選元素應用“自定義”的動畫。 clearQueue():對被選元素移除所有排隊的函式(仍未執行的)。 delay():對被選元素的所有排隊函式(仍未執行)設定延遲。 dequeue():執行被選元素的下一個排隊函式。 fa
widget中使用動畫效果
在activity中實現動畫,非常簡單。得益於Animation類。但是在widget中實現動畫效果,確很麻煩。由於widget中的限制太多,可以使用的控制元件太少。Gallery之類的都不支援,除非自己在原始碼環境中自定義新增,使RemoteViews支援。但是不是很實用,只合適編譯到Rom中的應用。
JS中元素動畫效果Transform屬性
元素縮放scale() 1、scale(x,y) 對元素進行縮放。X表示水平方向縮放的倍數 ,Y表示垂直方向的縮放倍數Y是一個可選引數,沒有設定的話,則表示X,Y兩個方向的縮放倍數是一樣的。 2、scaleX(n) 元素只在X軸(水平方向)縮放元素。預設值是1,基點一
React實戰-深入分析ReactNative中的動畫效果
React實戰-深入分析ReactNative中的動畫效果 說起動畫效果感覺回到JavaScript的起源了,在早期的Web開發中,JS更多的是扮演著頁面特效的角色,當然也只是屬於做些邊角料的工作,真正需要動畫的地方,大多還是採用Flash或者Applet,Js更多的是
Vue中的 slot插槽的簡單應用——input中巢狀按鈕的效果
場景: 需要一種類似於把按鈕放在input最右邊的效果 解決辦法: 1,發現在Vue中怎麼巢狀都出不了效果,網上搜到的一種html寫法(但是和Vue中的el-table-column有些影響): <form role="form"> <div cla
vue專案中如何使用動畫效果
滑鼠滑入滑出圖片逐漸放大的效果 <div class="video-item"> <div class="video-img"> <img src="../../assets/images/img1.jpg"/> </
vue中純html實現過度條動畫
效果:因為錄製的軟體關係,顯的有點卡,專案上自己哼哧哼哧地實現了這個功能,so,提升蠻大的,so,記錄一下,視訊裡面過度條移上移下,可以利用class 或style 動態渲染解決這個問題,我懶得寫了。 動畫效果 是利用計時器實現的,也有css動畫實現。自己發上來的程式碼稍微改了一下,可供大家參考
Vue中beforeRouterEnter的應用
can TP out 技術 應用 BE 分享圖片 進入 style 一般判斷從哪個頁面進入時需要判斷路由,用到了beforeRouteEnter方法。 註意:在在內部獲取不到外部的this,方法、變量等都獲取不到。但是vm.XXXXX可以獲取到 beforeRo
vue-06-過度和動畫
rev 過度 reverse mat bounce this 5.1 ive name 1, css過度與動畫 需要使用 v-if, v-show 來進行 1), 過度類名 v-enter: 進入時觸發 v-enter-active: 執行過程中 v-enter-to: 停