整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
首先看一下這個版本的vue css過渡和動畫的應用方式：
<p class="msg" v-if="show" v-transition="expand">Hello!</p>
<p class="animated" v-if="show" v-transition="bounce">Look at me!</p>.msg {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
.msg.expand-enter, .msg.expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
.animated {
display: inline-block;
}
.animated.bounce-enter {
animation: bounce-in .5s;
}
.animated.bounce-leave {
animation: bounce-out .5s;
}
@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);
}
}可以看到也是通過指令的方式，這個版本只有支持兩個類，一個是進入的時候添加的v-enter，另一個是離開時候添加的v-leave。
先看一下這個指令：
module.exports={
isLiteral: true,// 為true不會創建watcher實例
bind: function () {
this.update(this.expression)
},
update: function (id) {
var vm=this.el.__vue__ || this.vm
this.el.__v_trans={
id: id,
// 這個版本的vue可以使用transitions選項來定義JavaScript動畫
fns: vm.$options.transitions[id]
}
}
}這個指令不會創建watcher，因為指令的值要么是css的類名，要么是JavaScript動畫選項的名稱，都不需要進行觀察。指令綁定時所做的事情就是給el元素添加了個自定義屬性，保存了表達式的值，這里是expand、JavaScript動畫函數，這里是undefined。
要觸發動畫需要修改if指令show的值，假設開始是false，我們把它改成true，這會觸發if指令的update方法，根據第三篇vue0.11版本源碼閱讀系列三：指令編譯最后部分對if指令過程的解析我們知道在進入時調用了transition.blockAppend(frag, this.end, vm)，在離開時調用了transition.blockRemove(this.start, this.end, this.vm)，這里顯然會調用blockAppend：
// block是包含了if指令綁定元素的代碼片段
// target是一個注釋節點，在if指令綁定元素所在的位置
exports.blockAppend=function (block, target, vm) {
// 代碼片段的子節點
var nodes=_.toArray(block.childNodes)
for (var i=0, l=nodes.length; i < l; i++) {
apply(nodes[i], 1, function () {
_.before(nodes[i], target)
}, vm)
}
}遍歷元素調用apply方法：
var apply=exports.apply=function (el, direction, op, vm, cb) {
var transData=el.__v_trans
if (
!transData ||// 沒有過渡數據
!vm._isCompiled ||// 當前實例沒有調用過$mount方法插入到頁面
(vm.$parent && !vm.$parent._isCompiled)// 父組件沒有插入到頁面
) {// 上述情況不需要動畫，直接跳過
op()
if (cb) cb()
return
}
var jsTransition=transData.fns
// JavaScript動畫，下一小節再看
if (jsTransition) {
applyJSTransition(
el,
direction,
op,
transData,
jsTransition,
vm,
cb
)
} else if (
_.transitionEndEvent &&
// 頁面不可見的話不進行過渡
!(doc && doc.hidden)
) {
// css
applyCSSTransition(
el,
direction,
op,
transData,
cb
)
} else {
// 不需要應用過渡
op()
if (cb) cb()
}
}這個方法會判斷是應用JavaScript動畫還是css動畫，并分發給不同的函數處理。函數套娃，又套到了applyCSSTransition方法：
module.exports=function (el, direction, op, data, cb) {
var prefix=data.id || 'v'// 此處是expand
var enterClass=prefix + '-enter'// expand-enter
var leaveClass=prefix + '-leave'// expand-leave
if (direction > 0) { // 進入
// 給元素添加進入的類名
addClass(el, enterClass)
// op就是_.before(nodes[i], target)操作，這一步會把元素添加到頁面上
op()
push(el, direction, null, enterClass, cb)
} else { // 離開
// 給元素添加離開的類名
addClass(el, leaveClass)
push(el, direction, op, leaveClass, cb)
}
}可以看到進入和離開的操作是有區別的，本次我們是把show的值改成true，所以會走direction > 0的分支，先給元素添加進入的類名，然后再把元素實際插入到頁面上，最后調用push方法；
如果是離開的話會先給元素添加離開的類名，然后調用push方法；
看一下push方法：
var queue=[]
var queued=false
function push (el, dir, op, cls, cb) {
queue.push({
el : el,
dir : dir,
cb : cb,
cls : cls,
op : op
})
if (!queued) {
queued=true
_.nextTick(flush)
}
}把本次的任務添加到隊列，注冊了個異步回調在下一幀執行，關于nextTick的詳細分析請前往vue0.11版本源碼閱讀系列五：批量更新是怎么做的。
addClass和op都是同步任務，會立即執行，如果此刻有多個被這個if指令控制的元素都會被依次添加到隊列里，結果就是這些元素都會被添加到頁面上，但是因為我們給進入的樣式設置的是height: 0;opacity: 0;，所以是看不見的，這些同步任務執行完后才會去異步隊列里把注冊的flush方法拉出來執行：
function flush () {
// 這個方法用來觸發強制回流，確保我們添加的expand-enter樣式能生效，不過我試過不回流也能生效
var f=document.documentElement.offsetHeight
queue.forEach(run)
queue=[]
queued=false
}flush方法遍歷剛才添加到queue里的任務對象調用run方法，因為進行了異步批量更新，所以同一時刻有多個元素動畫也只會觸發一次回流：
function run (job) {
var el=job.el
var data=el.__v_trans
var cls=job.cls
var cb=job.cb
var op=job.op
// getTransitionType方法用來獲取是transition過渡還是animation動畫，原理是判斷元素的style對象或者getComputedStyle()方法獲取的樣式對象里的transitionDuration或animationDuration屬性是否存在以及是否為0s
var transitionType=getTransitionType(el, data, cls)
if (job.dir > 0) { // 進入
if (transitionType===1) {// transition過渡
// 因為v-enter的樣式是隱藏元素的樣式，另外因為給元素設置了transition: all .3s ease，所以只要把這個類刪除了自然就會應用過渡效果
removeClass(el, cls)
// 存在回調時才需要監聽transitionend事件
if (cb) setupTransitionCb(_.transitionEndEvent)
} else if (transitionType===2) {// animation動畫
// animation動畫只要添加了v-enter類自行就會觸發，需要做的只是監聽animationend事件在動畫結束后把這個類刪除
setupTransitionCb(_.animationEndEvent, function () {
removeClass(el, cls)
})
} else {
// 沒有過渡
removeClass(el, cls)
if (cb) cb()
}
} else { // 離開
// 離開動畫很簡單，兩者都是只要添加了v-leave類就可以觸發動畫
// 要做的只是在監聽動畫結束的事件把元素從頁面刪除和把類名從元素上刪除
if (transitionType) {
var event=transitionType===1
? _.transitionEndEvent
: _.animationEndEvent
setupTransitionCb(event, function () {
op()
removeClass(el, cls)
})
} else {
op()
removeClass(el, cls)
if (cb) cb()
}
}
}現在看一下當把show的值由true改成false時調用的blockRemove方法：
// start和end是兩個注釋節點，包圍了該if指令控制的所有元素
exports.blockRemove=function (start, end, vm) {
var node=start.nextSibling
var next
while (node !==end) {
next=node.nextSibling
apply(el, -1, function () {
_.remove(el)
}, vm, cb)
node=next
}
}遍歷元素同樣調用apply方法，只不過參數傳了-1代表是離開。
到這里可以總結一下vue的css過渡：
1.進入
先給元素添加v-enter類，然后把元素插入到頁面，最后創建一個任務添加到隊列，如果有多個元素的話會一次性全部完成，然后在下一幀來執行剛才添加的任務：
1.1css過渡
v-enter類名里的樣式一般是用來隱藏元素的，比如把元素的寬高設為0、透明度設為0等等，反正讓人看不見就對了，要觸發動畫需要把這個類名刪除了，所以這里的任務就是移除元素的v-enter類名，然后瀏覽器會自己應用過渡效果。
1.2css動畫
animation不一樣，v-enter類的樣式一般是定義animation的屬性值，比如：animation: bounce-out .5s;，只要添加了這個類名，就會開始動畫，所以這里的任務是監聽動畫結束事件來移除元素的v-enter類名。
2.離開
css過渡和動畫在離開時是一樣的，都是給元素添加一個v-leave類就可以了，v-leave類要設置的樣式一般和v-enter是一樣的，除非進出效果就是要不一樣，否則都是要讓元素不可見，然后添加一個任務，因為樣式上不可見了但元素實際上還是在頁面上，所以最后的任務就是監聽動畫結束事件把元素真正的從頁面上移除，當然，相應的v-leave類也是要 從元素上移除的。
在這個版本要使用JavaScript進行動畫過渡需要使用聲明過渡選項：
Vue.transition('fade', {
beforeEnter: function (el) {
// 元素插入文檔之前調用，比如提取把元素變成不可見，否則會有閃屏的問題
},
enter: function (el, done) {
// 元素已經插入到DOM，動畫完成后需要手動調用done方法
$(el)
.css('opacity', 0)
.animate({ opacity: 1 }, 1000, done)
// 返回一個函數當動畫取消時被調用
return function () {
$(el).stop()
}
},
leave: function (el, done) {
$(el).animate({ opacity: 0 }, 1000, done)
return function () {
$(el).stop()
}
}
})就是定義三個鉤子函數，定義了JavaScript過渡選項，在transition指令的update方法就能根據表達式獲取到，這樣就會走到上述apply方法里的jsTransition分支，調用applyJSTransition方法：
module.exports=function (el, direction, op, data, def, vm, cb) {
if (data.cancel) {
data.cancel()
data.cancel=null
}
if (direction > 0) { // 進入
// 調用beforeEnter鉤子
if (def.beforeEnter) {
def.beforeEnter.call(vm, el)
}
op()// 把元素插入到頁面dom
// 調用enter鉤子
if (def.enter) {
data.cancel=def.enter.call(vm, el, function () {
data.cancel=null
if (cb) cb()
})
} else if (cb) {
cb()
}
} else { // 離開
// 調用leave鉤子
if (def.leave) {
data.cancel=def.leave.call(vm, el, function () {
data.cancel=null
// 離開動畫結束了從頁面移除元素
op()
if (cb) cb()
})
} else {
op()
if (cb) cb()
}
}
}跟css過渡相比，JavaScript過渡很簡單，進入過渡就是在元素實際插入到頁面前執行以下你的初始化方法，然后把元素插入到頁面，接下來調用enter鉤子隨你怎么讓元素運動，動畫結束后再調一下vue注入的方法告訴vue動畫結束了，離開過渡先調一下你的離開鉤子，在你的動畫結束后再把元素從頁面上刪除，邏輯很簡單。
1）想讓元素樣式有個變化的過程，那么我們需要以某種方式從一個樣式過渡到另一種樣式。
CSS3 過渡是元素從一種樣式逐漸過渡到另一種樣式。
其語法如下所示：
transition: 指定屬性 持續時間 速度曲線 開始時間;它是一個復合屬性，我們也可以如下分開使用這幾個屬性。
transition-property: 屬性值; /*指定屬性名*/
transition-duration: 屬性值; /*完成過渡這一過程的時間*/
transition-timing-function: 屬性值; /*速度曲線*/
transition-delay: 屬性值; /*過渡的開始時間*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin-top:40px;
margin-left:40px;
width:50px;
height:50px;
background-color:#51adcf;
transition: transform 1s ease-in-out; /*ease-in-out 慢速開始慢速結束*/
}
div:nth-child(2){
transform: rotate(-60deg);
}
div:hover{
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>hover變兩倍大
transition-timing-function 屬性用來設置過渡效果從開始到結束的時間曲線，它有很多可用屬性值，常用屬性值如下表：
屬性值 | 說明 |
ease | 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
linear | 規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。 |
ease-in | 規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
ease-out | 規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
ease-in-out | 規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
steps(int,start 或者 end) | steps() 有兩個參數，第一個為步長，其值必須為整數，第二個值為可選值，它有兩個取值，分別是 start 和 end。 |
step-start | 相當于 steps(1, start)。 |
step-end | 相當于 steps(1, end)。 |
cubic-bezier(n,n,n,n) | 規定在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 |
initial | 規定使用默認值。 |
inherit | 規定從父元素繼承該屬性值。 |
例子，圖片一秒一步，4步變大為原先二倍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:50px;
height:50px;
margin:50px;
background-color:cornflowerblue;
transition: transform 4s steps(4);
}
div:hover{
transform:scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>練習一下：
按以上要求用 HTML 完成以下效果：
《vue 基礎》系列是再次回爐 vue 記的筆記，除了官網那部分知識點外，還會加入自己的一些理解。（里面會有大部分和官網相同的文案，有經驗的同學擇感興趣的閱讀）
講到動畫，說真的我自己用的的確不多，平時大部分時間都在處理業務問題，或者后端服務。
但前端的“產品”都是要給用戶看，并且使用的。好的網站除了服務響應快外，頁面交互也是出類拔萃的。
這篇就聊下 vue 中怎么來實現動畫的過渡效果。
依靠 vue 提供了 transition 組件標簽，來對如下特殊的指令或者標簽做 “進入/離開”過渡 效果：
v-if、v-show、動態組件、root 節點。
先來看段代碼，看下過渡效果：
當點擊 button 后，會控制 show 的值來切換 v-if 所要渲染的模板。能看到 hello 這塊內容在 v-if 切換時有個小動畫：
頁面效果
那動效怎么產生的呢？
1. 自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。
頁面增加標簽
2. 如果過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。3. 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的 nextTick 概念不同)
在進入/離開的過渡中，會有 6 個 class 切換：
v-enter –> v-enter-active –> v-enter-to –> v-leave –> v-leave-active –> v-leave-to
css 過渡
通過 transition 來定義過渡時期的 css 樣式：
過渡
css 動畫
除了過渡效果，我們還能設置 animation 標簽指定 css 動畫效果。
動畫
當然這兩者都是 css 范疇的特效知識，根據實際需要使用。
不過可能出現 animation 完成，但 transition 還在繼續的情況，對于這種情況需要設置 type=animation|transition 來區分 vue 所要監聽的類型。
我們先來看下兩種動效單獨的使用情況（動畫稍顯夸張，只為說明現象）：
animation
粉色方框按照 animation 設置的進度，逐步放大，直至結束，用時 1s：
頁面效果
transition
紅框從 300px 縮小至 100px，用時 3s：
頁面效果
一起使用
頁面效果
因為動效在時間 duration 中存在重疊交叉，所以會出現上面這樣變扭的效果，可以動過 type animation|transition 來指定 vue 監聽動效的類型加以控制。
比如，我們設置了 animation 就 屏蔽了 transition 的效果，就會和單使用 animation 一樣了。
設置 type
用于配合第三方 animate 類庫時使用。可以根據我們的需要細化效果的展示。
頁面標簽
可以在標簽上綁定過渡各個時期的鉤子，通過 js 來調用觸發相關事件的事件。
注意：當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。否則，它們將被同步調用，過渡會立即完成。
舉個多元素過渡的例子：
一般情況
如果存在數據就顯示 table 內容，不存在就顯示一個無數據的文案，然后通過 transition 動效切換不同效果。
但是如果當相同標簽元素切換時，就需要通過 key 來區分他們的不同。
相同元素切換
如果 相同元素模板的 key 一致，效果如下：
相同 key
注意，這不是期望的效果。可能你會感覺到生硬，因為相同 key 的元素切換時沒有過渡效果。
設置不同 key 后，動效得以生效：
不同 key
對比這兩者，是不是后者更為順滑些。
在兩個元素切換的時候，可能我們需要更細致的過渡模式，比如上例中：第一個 button 離開，第二個 button 進來之間的過程中，都被重新繪制了，間隙雖然很短，但能明顯看到產生了類似滑動的效果（不符合原始意圖）。
vue 提供了 mode 過渡模式：
你只要在原有 transition 標簽上，添加 mode="out-in" 即可：
設置 mode
當使用 mode="out-in" 時，第二個元素等待第一個元素消失后才入場，使得原始意圖符合預期。
同時 transition 也可以作用于“動態組件”的過渡效果。
與 transition 不同的是，列表過渡需要使用 <transition-group> 標簽。
transition-group
能注意到這里設置了 tag='div' ，可以讓最后的列表內容包裹在一個 div 標簽內。
上圖中，在列表中添加新元素的過渡效果是不是比沒有好多了？
針對列表中元素的移動，也有專門的屬性來定義：v-move，和 v-enter、v-leave 類似，最后會根據過渡時期來添加指定的樣式，用法參見 v-enter 等。
這是 vue 自帶的動過效果，來讓各個元素切換的過渡時期，用戶體驗更為流暢。
其實內置還有 FLIP 動畫隊列，并且根據數據驅動的基礎，能做更多的動畫特效展示，這塊內容你在 vue 官網能看到示例，這里就不做展開了。
一位“前端工程師”，樂于實踐，并分享前端開發經驗。
如果有問題或者想法，歡迎各位評論留言，愿大家共同進步。
關注【前端雨爸】，查閱更多前端技術心得。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
