基于路由切换信息的过渡动效（2）

来源：互联网发布：淘宝店铺卖什么吃香编辑：程序博客网时间：2024/05/16 03:25

避免千篇一律的路由切换动效的一个方法是：监听路由信息对象$route，根据路由切换信息来动态选择一个过渡效果。

首先我们将transition组件的name绑定到Vue实例的模型属性，以便动态地修改这个名字 —— 你知道，不同的name对应着不同的动效样式类名称，因而也就实现了不同的过渡动效。

例如，下面的模板将过渡动效组件的name属性绑定到Vue实例的effect属性：

<transition :name="effect">  <router-view></router-view></transition>

接下来是监听路由信息对象$route的变化。$route反映了当前的活动路由，它是VueRouter为Vue实例添加的一个响应式属性，因此我们可以在创建Vue实例时使用watch配置项声明一个监听器，或者使用$watch()方法监听它的每一次变化：

vm.$watch('$route',function(nv,ov){...})

$route的新值（nv - new value）代表当前的路由信息对象，旧值（ov - old value）代表前一次的路由信息对象，因此我们可以根据路径切换的不同来改变实例的effect属性。

例如，下面的代码，将根据当前的活动路径来设置Vue实例的effect属性：

vm.$watch('$route',function(to,from){  const effectMap = {    '/': 'home',    '/blogs':'blog',    '/about':'about'  }  this.effect =  effectMap(to.path)})

使用第三方动效库

如果使用第三方动效库，例如Animate.css，那么就应当将enter-active-class系列的样式类属性，绑定到Vue实例的响应式属性上。

例如，下面的模板中过渡动效组件的enter-active-class属性被绑定到Vue实例的effect属性：

<transition :enter-active-class="effect">  <router-view></router-view></transition>//..........................................................练习...................................................................//html部分<!doctype html><html><head>  <meta charset="utf-8">  <link rel="stylesheet" href="lib/animate.css"></head><body>  <div id="app" v-cloak>    <nav class="header">      <router-link to="/">首页</router-link>      <router-link to="/blogs">博客</router-link>      <router-link to="/about">关于</router-link>    </nav>    <transition :enter-active-class="effect">      <router-view></router-view>    </transition>  </div>        <script src="lib/vue-router.stack.min.js"></script>  <script src="lib/lodash.min.js"></script>  </body></html>//js部分 const EzHome = {template:'<div class="home"><h1>HOME</h1></div>'}const EzBlogs = {template:'<div class="blogs"><h1>BLOGS</h1></div>'}const EzAbout = {template:'<div class="about"><h1>ABOUT</h1></div>'}const router = new VueRouter({  routes:[    {path:'/',component:EzHome},    {path:'/blogs',component:EzBlogs},    {path:'/about',component:EzAbout}  ]})new Vue({  el:'#app',  router,  data:{    effects: ['zoomIn','slideInDown','bounceIn','flipInX','rotateIn','rollIn','lightSpeedIn','fadeIn'],    effect :''  },  watch:{    '$route'(to,from){      const effectMap = {          "/":"fadeIn",        "/blogs":"rotateIn",        "/about":"zoomIn"      }      this.effect = ['animated', effectMap[to.path]].join(' ')    }  }})

阅读全文

0 0