首頁  >  文章  >  web前端  >  Vue.js使用過渡動畫製作路由跳轉動畫

Vue.js使用過渡動畫製作路由跳轉動畫

php中世界最好的语言
php中世界最好的语言原創
2018-03-13 14:46:143628瀏覽

這次帶給大家Vue.js使用過渡動畫製作路由跳轉動畫,Vue.js使用過渡動畫製作路由跳轉動畫的注意事項有哪些,下面就是實戰案例,一起來看一下。

keep-live :切換過的檢視會被快取起來,如果不加keep-live 每次都會去重新請求一次,這樣比較消耗資源

<transition name="fade">
   <keep-alive>
      <router-view></router-view>
   </keep-alive></transition>

注意:

當我們切換導航的時候,當前的link標籤的類別會被賦值為class="router-link-active",這是一個很有用的操作.

為router-link添加active-class="active" 用來修改樣式

<ul>
    <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
     {{ item.name }}    </router-link></ul>css部分
选种和hover时,显示蓝色
.product-board li.active,
.product-board li:hover {
  background: #4fc08d;
  color: #fff;
}
......

router-view的keep-alive屬性,保證該視圖只渲染一次,來回切換不重複渲染


Vue.js使用過渡動畫製作路由跳轉動畫

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Vue.js路由的其他操作

Vue.js的巢狀路由(子路由)

Vue.js的自訂指令directive

以上是Vue.js使用過渡動畫製作路由跳轉動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn