Implementation of vue page loading animation effect

This article mainly introduces the page loading animation effect of Vue in detail. The Vue page appears with the loading initial page and the animation effect. It has certain reference value. Interested friends can refer to it. I hope it can be helpful. Everyone.

<template>
 <section class="page" v-if="option" 
  :style="{background: option.background,color: option.color||&#39;#fff&#39;}"  
  :class="{&#39;page-before&#39;: option.index < currentPage,
    &#39;page-after&#39;: option.index > currentPage,
    &#39;page-current&#39;: option.index === currentPage}">
  <p :class="{&#39;all-center&#39;: option.isCenter}">
   <slot></slot>
  </p>
 </section>
 <section class="page" v-else>页面正在渲染中。。。</section>
</template>

Do you think it’s very simple?
Here’s some dry stuff to achieve the animation effect of the page

<template>
 <nav class="controller">
  <button v-if="option.arrowsType" class="prev-btn" :class="{moving:option.arrowsType === &#39;animate&#39;}" @click="changePage(prevIndex)"></button>
  <ul v-if="option.navbar">
   <li v-for="index in pageNum" @click="changePage(index)" :class="{current:option.highlight && index === currentPage}" :key="&#39;controller-&#39;+index" :data-index="index" class="controller-item"></li>
  </ul>
  <button v-if="option.arrowsType" class="next-btn" :class="{moving:option.arrowsType === &#39;animate&#39;}" @click="changePage(nextIndex)"></button>
 </nav>
</template>

<script>
export default {
 name: &#39;page-controller&#39;,
 props: {
 pageNum: Number,
 currentPage: Number,
 option: {
  type: Object,
  default: {
  arrowsType: &#39;animate&#39;,
  navbar: true,
  highlight: true,
  loop: true  //是否开启滚动循环
  }
 }
 },
 methods: {
 changePage (index) {
  this.$emit(&#39;changePage&#39;, index);
 }
 },
 computed: {
 nextIndex () {
  if (this.currentPage === this.pageNum) {
  if(this.option.loop){
   return 1
   }else{
   return this.pageNum
   }
  } else {
  return this.currentPage + 1;
  }
 },
 prevIndex () {
  if (this.currentPage === 1) {
  if(this.option.loop){
   return this.pageNum
   }else{
   return 1
   }
  } else {
  return this.currentPage - 1;
  }
 }
 },
 created () {
 if (this.option.navbar === undefined) {
  this.option.navbar = true;
 }
 },
 mounted () {
 let _this = this;
 let timer = null;
 let start = 0;
 // 滚轮处理
 function scrollHandler (direction) {
  // 防止重复触发滚动事件
  if (timer != null) {
  return;
  }
  if (direction === &#39;down&#39;) {
  _this.changePage(_this.nextIndex);
  } else {
  _this.changePage(_this.prevIndex);
  }
  timer = setTimeout(function() {
  clearTimeout(timer);
  timer = null;
  }, 300);
 }
 // if (Object.hasOwnProperty.call(window,&#39;onmousewheel&#39;)) {
 if (Object.hasOwnProperty.call(window,&#39;onmousewheel&#39;)) {
  // 监听滚轮事件
  window.addEventListener(&#39;mousewheel&#39;,function (event) { // IE/Opera/Chrome
  let direction = event.wheelDelta > 0 ? &#39;up&#39;:&#39;down&#39;;
  scrollHandler(direction);
  },false);
 } else {
  window.addEventListener(&#39;DOMMouseScroll&#39;,function (event) { // Firefox
  let direction = event.detail > 0 ? &#39;up&#39;:&#39;down&#39;;
  scrollHandler(direction);
  },false);
 }
 // 移动端触摸事件处理
 window.addEventListener(&#39;touchstart&#39;, function (event) {
  start = event.touches[0].clientY;
 })
 window.addEventListener(&#39;touchmove&#39;, function (event) {
  event.preventDefault();
 })
 window.addEventListener(&#39;touchend&#39;, function (event) {
  let spacing = event.changedTouches[0].clientY - start;
  let direction;  
  if (spacing > 50) {
  direction = &#39;up&#39;;
  scrollHandler(direction);
  } else if (spacing < -50) {
  direction = &#39;down&#39;;
  scrollHandler(direction);
  }
 })
 }
}
</script>

<style scoped>
.controller {
 position: fixed;
 right: 20px;
 top: 50%;
 z-index: 99;
}
.controller ul {
 transform: translate3d(0,-50%,0);
 list-style: none;
 margin: 0;
 padding: 0;
}
.controller-item {
 cursor: pointer;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 margin-top: 10px;
 background-color: rgba(255, 255, 255, 0.3);
 transition: background-color 0.3s ease 0s;
}
.controller-item:hover {
 background-color: rgba(255, 255, 255, 0.7);
}
.controller-item.current {
 background-color: rgba(255, 255, 255, 1);
}
.prev-btn,.next-btn {
 cursor: pointer;
 display: block;
 text-align: center;
 width: 20px;
 height: 20px;
 position: fixed;
 left: 50%;
 margin-left: -10px;
 border: 4px solid #fff;
 background-color: transparent;
 outline: none;
}
.prev-btn {
 top: 80px;
 transform: rotate(-45deg);
 border-bottom-color: transparent;
 border-left-color: transparent;
}
.next-btn {
 bottom: 80px;
 transform: rotate(45deg);
 border-top-color: transparent;
 border-left-color: transparent;
}
.prev-btn.moving {
 animation: prev-up-down 0.7s linear 0s infinite;
}
.next-btn.moving {
 animation: next-up-down 0.7s linear 0s infinite;
}
@keyframes next-up-down {
 0% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
 25% {
 transform: translate3d(0,6px,0) rotate(45deg);
 }
 50% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
 75% {
 transform: translate3d(0,-6px,0) rotate(45deg);
 }
 100% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
}
@keyframes prev-up-down {
 0% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
 25% {
 transform: translate3d(0,-6px,0) rotate(-45deg);
 }
 50% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
 75% {
 transform: translate3d(0,6px,0) rotate(-45deg);
 }
 100% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
}
</style>

This article has been compiled into the "Vue.js Front-end Component Learning Tutorial". Everyone is welcome to learn and read.

For tutorials on vue.js components, please click on the special vue.js component learning tutorial to learn.

Related recommendations:

How to use HTML5 to achieve the effect of waiting for loading animation

Super cool CSS3 loading animation special effects

Share 8 excellent jQuery loading animation and progress bar plug-ins_jquery

The above is the detailed content of Implementation of vue page loading animation effect. For more information, please follow other related articles on the PHP Chinese website!