欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Vue.js使用过渡动画制作路由跳转动画

程序员文章站 2022-03-09 17:12:31
...
这次给大家带来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属性,保证该视图只渲染一次,来回切换不重复渲染

<router-view :seller="seller" keep-alive></router-view>

Vue.js使用过渡动画制作路由跳转动画

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

Vue.js路由的其他操作

Vue.js的嵌套路由(子路由)

Vue.js的自定义指令 directive

以上就是Vue.js使用过渡动画制作路由跳转动画的详细内容,更多请关注其它相关文章!