Heim  >  Artikel  >  Web-Frontend  >  Implementierung des Vue-Animationseffekts zum Laden von Seiten

Implementierung des Vue-Animationseffekts zum Laden von Seiten

小云云
小云云Original
2018-02-08 10:44:144031Durchsuche

Dieser Artikel stellt hauptsächlich den Seitenlade-Animationseffekt von Vue vor. Ich hoffe, er kann hilfreich sein. Alle.


<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>

Glauben Sie, dass es sehr einfach ist?
Hier sind einige Tipps, um den Animationseffekt der Seite zu erzielen


<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>

Dieser Artikel wurde in „Vue.js Front-End Component Learning Tutorial“ unterteilt. Jeder ist herzlich willkommen, ihn zu lernen und zu lesen.

Für Tutorials zu vue.js-Komponenten klicken Sie bitte auf das spezielle Tutorial zum Lernen von vue.js-Komponenten.

Verwandte Empfehlungen:

So verwenden Sie HTML5, um den Effekt des Wartens auf das Laden einer Animation zu erzielen

Super cooles CSS3-Laden Animationseffekte

Teilen von 8 hervorragenden jQuery-Ladeanimations- und Fortschrittsbalken-Plug-ins_jquery

Das obige ist der detaillierte Inhalt vonImplementierung des Vue-Animationseffekts zum Laden von Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn