vue 路由切换过渡动效滑入滑出效果的实例代码

下面是关于vue路由切换过渡动效滑入滑出效果的示例代码及攻略，分别从以下两个方面进行说明：

1. 在vue-router中配置过渡动效的方法
2. 实现滑入滑出效果的代码示例

1. 在vue-router中配置过渡动效的方法

在vue-router中，可以通过<transition>标签嵌套页面组件，来为页面组件配置过渡动效。

具体配置方法如下：

（1）在<router-view>标签中，包裹<transition>标签:

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

其中，name属性用来指定过渡动效的名称，mode属性可以设置过渡模式。过渡模式包括：in-out和out-in。如果mode值为in-out，则组件进入动效后，再执行离开动效；如果mode值为out-in，则离开动效先执行，再执行组件进入的动效。

（2）在样式文件中定义过渡动效

在上面代码中，我们指定了name为fade，那么在样式文件中需要设置以下两个类：.fade-enter-active 和 .fade-leave-active：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

其中，.fade-enter-active 和.fade-leave-active 类用来设置过渡时的动态效果，这里我们使用了opacity(透明度)属性实现淡入淡出效果。.fade-enter 和.fade-leave-active 类用于设置终态。

2. 实现滑入滑出效果的代码示例

以一个例子为例子来说明滑入滑出效果的代码实现。该例子包含两个路由组件：Home 和 About。

示例1

（1）先在router/index.js文件中，添加两个路由组件：

import Home from '../components/Home.vue'
import About from '../components/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

export default router

（2）在App.vue文件中实现滑入滑出效果的代码

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <transition name="slide" mode="out-in">
      <router-view class="view"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    this.$router.beforeEach((to, from, next) => {
      if (to.path === '/') {
        next('/home')
      } else {
        next()
      }
    })
  }
}
</script>

<style>
/* 定义路由动效 */
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter, .slide-leave-active {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-leave-active, .slide-enter{
  position:absolute;
  width:100%;
  height:100%;
}
</style>

其中，我们在<transition>标签中，指定了name为slide，其中.slide-enter-active和.slide-leave-active用来设置过渡动效，.slide-enter和.slide-leave-active用来设置终态。我们使用了translateX来实现滑入滑出效果。

示例2

示例2的实现和示例1的原理相同，只是动画效果有所不同。我们将滑入滑出效果改为从上往下滑动，代码如下：

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <transition name="slide-vertical" mode="out-in">
      <router-view class="view"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    this.$router.beforeEach((to, from, next) => {
      if (to.path === '/') {
        next('/home')
      } else {
        next()
      }
    })
  }
}
</script>

<style>
/* 定义路由动效 */
.slide-vertical-enter-active, .slide-vertical-leave-active {
  transition: all 0.3s ease;
}

.slide-vertical-enter {
  transform: translateY(-100%);
}

.slide-vertical-leave-active {
  transform: translateY(100%);
}
</style>

其中，我们在<transition>标签中，指定了name为slide-vertical，并添加了类.slide-vertical-enter和.slide-vertical-leave-active，分别用来设置动画效果和终态。我们使用了translateY来实现从上往下滑动效果。

通过以上两个示例的实现代码，可以看出，在vue-router中实现过渡动效，只需要在<router-view>标签外层添加<transition>标签，并在样式文件中定义过渡动效即可。如果想实现滑入滑出效果，只需要调整样式中的属性值即可。