Vue-Router实现页面加载动画与过渡效果教程

Vue-Router实现页面加载特效教程

前言

vue-router作为Vue.js官方提供的路由解决方案，与Vue核心深度集成，特别适用于构建单页面应用（SPA）。在vue的单页面架构中，路由负责定义访问路径并将路径与组件进行映射。传统网页通过超链接实现页面跳转，而vue-router则通过路径切换来触发组件的替换。

在使用Vue.js和Vue-Router开发单页面应用时，由于每个页面对应一个Vue组件，通常需要从服务器端获取数据，随后由Vue引擎将数据渲染至页面。

以用户个人资料页面为例，

user.vue文件的结构如下：


<template>
 <div>
  <h2 v-text="user.name"></h2>
  <p v-text="user.description"></p>
 </div>
</template>
<script>
 export default{
  data(){
   return{
    user: {}
   }
  }
 }
</script>

在动画过渡期间向服务器请求数据，具体实现如下：


<script>
export default{
 data(){
  return{
   user: {}
  }
 },
 route: {
  data: function (transition) {
   this.getUserDetails(transition);
  }
 },
 methods: {
  getUserDetails(transition)
  {
   this.$http.get('/users/' + this.$route.params.userName)
    .then(function (response) {
     this.user = response.data;
     transition.next();
    });
  }
 }
}
</script>

通过访问变量 $loadingRouteData，可以控制隐藏所有页面元素，并显示特定的加载指示器，例如Logo等。


<div v-if="$loadingRouteData">
 <div class="white-widget grey-bg author-area">
 <div class="auth-info row">
 <div class="timeline-wrapper">
 <div class="timeline-item">
  <div class="animated-background">
   <div class="background-masker header-top"></div>
   <div class="background-masker header-left"></div>
   <div class="background-masker header-right"></div>
   <div class="background-masker header-bottom"></div>
   <div class="background-masker subheader-left"></div>
   <div class="background-masker subheader-right"></div>
   <div class="background-masker subheader-bottom"></div>
  </div>
 </div>
 </div>
 </div>
 </div>
</div>
<div v-if="!$loadingRouteData">
 <div>
  <h2 v-text="user.name"></h2>
  <p v-text="user.description"></p>
 </div>
</div>

正在加载状态的样式代码如下：


.timeline-item {
 background: #fff;
 border-bottom: 1px solid #f2f2f2;
 padding: 25px;
 margin: 0 auto;
}

@keyframes placeHolderShimmer{
 0%{
 background-position: -468px 0
 }
 100%{
 background-position: 468px 0
 }
}

.animated-background {
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-iteration-count: infinite;
 animation-name: placeHolderShimmer;
 animation-timing-function: linear;
 background: #f6f7f8;
 background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
 background-size: 800px 104px;
 height: 40px;
 position: relative;
}

.background-masker {
 background: #fff;
 position: absolute;
}

/* Every thing below this is just positioning */

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
 top: 0;
 left: 40px;
 right: 0;
 height: 10px;
}

.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
 top: 10px;
 left: 40px;
 height: 8px;
 width: 10px;
}

.background-masker.header-bottom {
 top: 18px;
 height: 6px;
}

.background-masker.subheader-left,
.background-masker.subheader-right {
 top: 24px;
 height: 6px;
}


.background-masker.header-right,
.background-masker.subheader-right {
 width: auto;
 left: 300px;
 right: 0;
}

.background-masker.subheader-right {
 left: 230px;
}

.background-masker.subheader-bottom {
 top: 30px;
 height: 10px;
}

.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
 top: 40px;
 left: 0;
 right: 0;
 height: 6px;
}

.background-masker.content-top {
 height:20px;
}

.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
 width: auto;
 left: 380px;
 right: 0;
 top: 60px;
 height: 8px;
}

.background-masker.content-second-line {
 top: 68px;
}

.background-masker.content-second-end {
 left: 420px;
 top: 74px;
}

.background-masker.content-third-line {
 top: 82px;
}

.background-masker.content-third-end {
 left: 300px;
 top: 88px;
}

至此，便实现了Vue-Router的页面加载效果。可将上述代码封装为独立组件，并在需要使用的地方引入即可。

最后

这仅是关于Vue-Router加载组件的简单教程，实际上还有许多改进空间，

VueJobs.com

若你对Vue.js感兴趣，可访问该网站浏览，了解国外对Vue开发者的技能要求。

以上为本文全部内容，希望能为你的学习或工作提供帮助。如有疑问，欢迎留言交流。

Vue-Router实现页面正在加载特效方法示例

Vue-Router实现页面加载特效教程

实用工具推荐