Vue動畫
- 2.0動畫定義的幾個class
1.name-enter{}動畫開始的初始狀態(tài)
2.name-enter-active{}動畫完成的狀態(tài)-元素出現(xiàn)時
3.name-leave{}動畫退出的結(jié)束狀態(tài)（可以忽略）
4.name-leave-active{}動畫退出的狀態(tài)-元素消失時
<transition name="name">
<p v-show="show"></p>
</transition>
- 動畫的函數(shù)接口(寫入transition標(biāo)簽內(nèi))
1@before-enter='fn'動畫進(jìn)入之前
2@enter='fn'動畫進(jìn)入
3@after-enter='fn'動畫完成之后
4@before-leave='fn'動畫離開之前
5@leave='fn'動畫退出
6@after-leave='fn'動畫退出之后
fn(el)傳入的參數(shù)是執(zhí)行動畫的元素
demo動畫接口函數(shù) - Vue2.0動畫配合animate.css動畫庫
1在動畫元素上加入animated的class
2在transition標(biāo)簽內(nèi)定義動畫的執(zhí)行的名稱
enter-active-class="inName"
leave-active-class="outName"
配合animate庫 - 多個動畫元素
使用transition-group包裹所要運動的元素
每個運動元素需要使用:key='num'
多個動畫元素demo
Vue2.0路由與vue-loader
- 2.0路由的基本配置
使用route-link定向路由的位置
.router-link-active可以設(shè)置當(dāng)前觸發(fā)路由的樣式
path:*和redirect:設(shè)置通配符*默認(rèn)路由指向位置
基礎(chǔ)的路由配置 - 嵌套使用子路由
子路由配置和路由配置一樣,但是是配置在children數(shù)組里
path:':username/:age'的參數(shù)寫法可以用{{$router.params}}獲取
路由信息對象參考
嵌套子路由demo - vue-route使用HTML5-History API
router.push(location)表示在歷史記錄中添加一個路由,當(dāng)使用這個方法時路由會在歷史信息里添加一個新的記錄
router.replace(location)表示替換當(dāng)前的路由,實際是替換掉當(dāng)前歷史記錄,與上一個方法類似但不會再歷史記錄里添加 ,使用此方法并不會刷新當(dāng)前頁面
官方參考
路由切換demo
