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

避免千篇一律的路由切换动效的一个方法是：监听路由信息对象$route，根据路由切换信息来动态选择一个过渡效果。首先我们将transition组件的name绑定到Vue实例的模型属性，以便动态地修改这个名字 —— 你知道，不同的name对应着不同的动效样式类名称，因而也就实现了不同的过渡动效。例如，下面的模板将过渡动效组件的name属性绑定到Vue实例的effect属性：transiti

likeuzi

15477人浏览 · 2017-10-23 18:45:13

likeuzi · 2017-10-23 18:45:13 发布

避免千篇一律的路由切换动效的一个方法是：监听路由信息对象$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(' ')
    }
  }
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^