vue ajax加载动画,vue页面加载动画效果的实现

本文主要和大家详细介绍了vue实现页面加载动画效果，vue页面出现正在加载的初始页面与实现动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

:style="{background: option.background,color: option.color||'#fff'}"

:class="{'page-before': option.index < currentPage,

'page-after': option.index > currentPage,

'page-current': option.index === currentPage}">

页面正在渲染中。。。

有木有感觉很简单

下面上点干货，实现页面的动画效果

export default {

name: 'page-controller',

props: {

pageNum: Number,

currentPage: Number,

option: {

type: Object,

default: {

arrowsType: 'animate',

navbar: true,

highlight: true,

loop: true //是否开启滚动循环

}

}

},

methods: {

changePage (index) {

this.$emit('changePage', 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 === 'down') {

_this.changePage(_this.nextIndex);

} else {

_this.changePage(_this.prevIndex);

}

timer = setTimeout(function() {

clearTimeout(timer);

timer = null;

}, 300);

}

// if (Object.hasOwnProperty.call(window,'onmousewheel')) {

if (Object.hasOwnProperty.call(window,'onmousewheel')) {

// 监听滚轮事件

window.addEventListener('mousewheel',function (event) { // IE/Opera/Chrome

let direction = event.wheelDelta > 0 ? 'up':'down';

scrollHandler(direction);

},false);

} else {

window.addEventListener('DOMMouseScroll',function (event) { // Firefox

let direction = event.detail > 0 ? 'up':'down';

scrollHandler(direction);

},false);

}

// 移动端触摸事件处理

window.addEventListener('touchstart', function (event) {

start = event.touches[0].clientY;

})

window.addEventListener('touchmove', function (event) {

event.preventDefault();

})

window.addEventListener('touchend', function (event) {

let spacing = event.changedTouches[0].clientY - start;

let direction;

if (spacing > 50) {

direction = 'up';

scrollHandler(direction);

} else if (spacing < -50) {

direction = 'down';

scrollHandler(direction);

}

})

}

}

.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);

}

}

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

相关推荐：