當從 DOM 中插入、更新或移除項目時，Vue 提供多種應用過渡效果的方式。包括以下工具：
- 在 CSS 過渡和動畫中自動處理 class
- 可以配合使用第三方 CSS 動畫庫，如 Animate.css
- 在過渡鈎子函數中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js
vue提供了一個transition外層包裹容器元件，可以給條件渲染（v-for）、條件展示（v-show）、動态元件群組件根節點添加進入（enter）和離開（leave）過渡。
單元素/元件過渡
1.通過css樣式實作過渡動畫，在css樣式中可以通過transform和animation屬性來定義動畫效果。
<template>
<div>
<button @click="show=!show">點選</button>
<transition name="fade">
<p v-if="show">Hello</p>
</transition>
</div>
</template>
在css樣式中通過class類名與transition的name值關聯，設定過渡效果
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
注：有6種class名來處理過渡的過程
1、v-enter：進入式過渡的開始狀态，作用于開始的一幀
2、v-enter-active：進入式過渡的激活狀态，作用于整個過程
3、v-enter-to：進入式過渡的結束狀态，作用于結束的一幀（僅适應于2.1.8+）
4、v-leave：離開式過渡的開始狀态，作用于開始的一幀
5、v-leave-active：離開式過渡的激活狀态，作用于整個過程
6、v-leave-to：離開式過渡的結束狀态，作用于結束的一幀（僅适應于2.1.8+）
2、自定義過渡的class類名：使用第三方css動畫庫
<link href="https://cdn.jsdelivr.net/npm/[email protected]" target="_blank" rel="external nofollow" 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"//tada和boundceOutRight是css動畫庫裡的類名
>
<p v-if="show">hello</p>
</transition>
</div>
3、顯示過渡的持續時間
<transition :duration="1000">...</transition>
//還可以為進入式和離開式持續時間指定不同的值
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
4、javaScript鈎子函數：使用第三方javaScript動畫庫：Velocity.js
在僅使用javaScript的過渡顯式添加v-bind：css="false",以便Vue可以跳過css偵測。
<script src="https://lib.baomitu.com/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
在使用enter和leave鈎子函數中，必須有done回調函數，否則，這兩個鈎子函數會被同步調用，過渡會立即完成；
new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})
狀态間過渡具體使用場景
1、在初始渲染時過渡：在transition标簽内添加appear屬性
預設情況下會使用特定過渡，如果想要添加自定義的樣式可以通過appear-class來綁定類名初始渲染進入時刻效果，appear-active-class綁定整個過程的效果，appear-to-class綁定結束狀态效果。也可以自定義指定javaScript鈎子事件，v-on:before-appear，v-on:appear、v-on:after-apprar和v-on:appear-cancelled。
2、多元素之間的切換效果
通過v-if和v-else來對初始狀态進行切換，當在具有相同标簽名之間切換時，需要給标簽添加一個唯一的key屬性，便于區分。
不同元素間的切換：
<transition>
<table v-if="items.length > 0">
<!-- ... -->
</table>
<p v-else>Sorry, no items found.</p>
</transition>
相同标簽名之間的切換需要添加key屬性：
<transition>
<button v-if="isEditing" key="save">
Save
</button>
<button v-else key="edit">
Edit
</button>
</transition>
注：兩個按鈕會同步渲染 - 當一個過渡進入時，另一個過渡離開。這是
<transition>
的預設行為 - 進入和離開同時發生。不過如果是絕對定位或者将元素位移時就像是滑動效果。若同時生效不能滿足需求，transition還提供了過渡模式mode屬性，屬性值為out-in或者in-out。
3、多元件之間的過渡
不需要使用key屬性，使用動态元件component，通過v-show綁定值，控制顯示内容。
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active 在低于 2.1.8 版本中 */ {
opacity: 0;
}
![安卓學習筆記（一） Activity篇[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)