下面就为你介绍一下如何使用Vue和Vue Router实现转场动画的实例代码。

1. 引入Vue和Vue Router

首先在你的项目中引入Vue和Vue Router。

<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入Vue Router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2. 定义路由

在Vue中使用Vue Router时，需要先定义路由。

// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

3. 创建Vue实例

创建Vue实例时，需要将定义好的路由传递给Vue Router。

// 创建Vue实例
const router = new VueRouter({
  routes
});

const app = new Vue({
  router
}).$mount('#app');

4. 添加转场动画

添加转场动画需要使用Vue的过渡效果。Vue提供了四个钩子函数，可以在不同的时刻添加过渡效果。

beforeEnter：进入动画之前执行
enter：进入动画时执行
afterEnter：进入动画结束后执行
beforeLeave：离开动画之前执行
leave：离开动画时执行
afterLeave：离开动画结束后执行

在路由组件中，可以使用transition标签来包装需要添加过渡效果的元素。

下面是一个示例代码：

<template>
  <div>
    <h1>Home Page</h1>
    <!-- 包装需要添加过渡效果的元素 -->
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在这个示例中，我们为包裹<router-view>元素的<transition>标签指定了一个name属性，这个属性的值为fade。然后我们在<style>标签中定义了两组类名，这两组类名分别是.fade-enter-active、.fade-leave-active和.fade-enter、.fade-leave-to。这两组类名中的样式会在不同的钩子函数中生效。

当路由切换时，<transition>标签会自动判断是进入动画还是离开动画，并且会自动添加类名，触发对应的钩子函数，从而实现过渡效果。

5. 示例说明

下面以两个示例来说明如何使用Vue和Vue Router实现转场动画。

示例一

在这个示例中，我们新建一个Vue项目，然后创建两个路由组件，分别为Home和About。我们为<router-view>元素添加了fade类和slide类，分别实现了渐隐渐显和滑动过渡效果。

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Router Transition Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/about">About</router-link></li>
        </ul>
      </nav>
      <transition name="fade">
        <router-view class="fade"></router-view>
      </transition>
      <transition name="slide" mode="out-in">
        <router-view class="slide"></router-view>
      </transition>
    </div>
    <script src="./app.js"></script>
  </body>
</html>

// app.js
const Home = { template: '<div>Home Page</div>' };
const About = { template: '<div>About Page</div>' };

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

const app = new Vue({
  router
}).$mount('#app');

/* styles.css */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

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

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}

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

.slide-leave-to {
  transform: translateX(-100%);
}

示例二

在这个示例中，我们在上一个示例的基础上添加了路由守卫，实现了路由切换时的等待效果。当路由切换时，我们在路由组件中添加了一个loading属性，并在路由钩子函数中控制这个属性的值。当这个属性为true时，会显示等待动画。

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Router Transition Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/about">About</router-link></li>
        </ul>
      </nav>
      <transition name="fade">
        <router-view class="fade"></router-view>
      </transition>
      <transition name="slide" mode="out-in">
        <router-view class="slide"></router-view>
      </transition>
    </div>
    <script src="./app.js"></script>
  </body>
</html>

// app.js
const Home = {
  template: `
    <div>
      <h1>Home Page</h1>
      <div v-if="loading" class="loading">
        Loading...
      </div>
    </div>
  `,
  data() {
    return { loading: false };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.loading = true;
      setTimeout(() => {
        vm.loading = false;
      }, 2000);
    });
  }
};

const About = {
  template: `
    <div>
      <h1>About Page</h1>
      <div v-if="loading" class="loading">
        Loading...
      </div>
    </div>
  `,
  data() {
    return { loading: false };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.loading = true;
      setTimeout(() => {
        vm.loading = false;
      }, 3000);
    });
  }
};

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

const app = new Vue({
  router
}).$mount('#app');

/* styles.css */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

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

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}

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

.slide-leave-to {
  transform: translateX(-100%);
}

.loading {
  margin: 20px auto;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #ccc;
}

在这两个示例中，我们都实现了Vue和Vue Router的转场动画效果，并且通过使用路由守卫实现了等待效果。通过这些示例，你可以更好地了解如何使用Vue和Vue Router实现转场动画。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue+vue-router转场动画的实例代码 - Python技术站

vue+vue-router转场动画的实例代码

1. 引入Vue和Vue Router

2. 定义路由

3. 创建Vue实例

4. 添加转场动画

5. 示例说明

示例一

示例二

相关文章