vue的動畫組件（transition）
當插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理：
自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。
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 完成之後移除。
配合上css的動畫庫，我們會有很好的效果：https:[email protected]/animate.min.css"
demo01:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js" type="text/javascript"></script>
<link href="https:[email protected]/animate.min.css" rel="stylesheet" type="
對於這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用
<transition name="my-transition" 可以重置前綴，比如 v-enter 替換為 my-transition-enter。
demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js" type="text/javascript">
</script>
<script src="../lib/vue_router.js"></script>
<style>
.fade-enter-active,.fade-leave-active{
transition: all .3s;
}
.fade-enter,.fade-leave-to{
opacity:0
}
.style-enter-active,.style-leave-active{
transition: all .3s;
}
.style-enter,.style-leave-to{
opacity:0
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽(默認)，你也可以改變 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/foo/ff">Go to foo ff</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這裏 -->
<!---name="fade" fade成為類名的前綴（我們也可以進行自定義）---->
<!--<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
-->
<transition name="style" mode="out-in">
<!--transition是vue的動畫組件，會自動監聽其中元素得狀態改變，為其--->
<router-view></router-view>
</transition>
</div>
</body>
</html>
<script>
// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const Foo = { template: ‘<div>foo</div>‘ }
const Bar = { template: ‘<div>bar</div>‘ }
const Foo_ff={template: ‘<p>foo_ff</p>‘}
// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
// 我們晚點再討論嵌套路由。
const routes = [
{ path: ‘/foo‘, component: Foo },
{ path: ‘/foo/ff‘, component: Foo_ff },
{ path: ‘/bar‘, component: Bar },
]
// 3. 創建 router 實例，然後傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這麽簡單著吧。
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes
})
// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數註入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount(‘#app‘)
</script>
如果過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機會被自動調用。
如果沒有找到 JavaScript 鉤子並且也沒有檢測到 CSS 過渡/動畫，DOM 操作（插入/刪除）在下一幀中立即執行。
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">
鉤子函數配合velocity.js動畫使用，來完成動畫效果，感覺不錯（並且js動畫相比css動畫的好處，我不知道,好像可以百度到）
https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js
http://velocityjs.org/#reverse
demo
<!--http://velocityjs.org/#reverse--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../lib/vue.js"></script> </head> <body> <div id="app5"> <button @click="show = !show">toggle hook</button> <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false"> <p v-if="show">javascript 鉤子使用</p> </transition> </div> </body> </html> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <script > new Vue({ el:‘#app5‘, data:{ show:false }, methods:{ beforeEnter:function (el) { console.log(el); alert("beforeEnter"); el.style.opacity = 0 el.style.transformOrigin = ‘left‘ }, enter:function (el, done) { alert("enter"); // console.log(done); Velocity(el, {opacity:1, fontSize:‘1.4em‘}, {duration:300}); Velocity(el, {fontSize:‘1em‘}, {complete:done}); Velocity(el,"reverse", { duration: 6000 }); Velocity(el,{ borderBottomWidth: [ "2px", "spring" ], // Uses "spring" width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics height: "100px" // Defaults to easeInSine, the call‘s default easing }, { easing: "easeInSine" // Default easing }); }, 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}) } } }) </script>
參考：http://www.chairis.cn/blog/article/27
vue的動畫組件（transition）