vue实现页面加载动画效果
时间:2019-04-06
本文章向大家介绍vue实现页面加载动画效果,主要包括vue实现页面加载动画效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码
<template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class="{'page-before': option.index < currentPage, 'page-after': option.index > currentPage, 'page-current': option.index === currentPage}"> <div :class="{'all-center': option.isCenter}"> <slot></slot> </div> </section> <section class="page" v-else>页面正在渲染中。。。</section> </template>
有木有感觉很简单
下面上点干货,实现页面的动画效果
<template> <nav class="controller"> <button v-if="option.arrowsType" class="prev-btn" :class="{moving:option.arrowsType === 'animate'}" @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="'controller-'+index" :data-index="index" class="controller-item"></li> </ul> <button v-if="option.arrowsType" class="next-btn" :class="{moving:option.arrowsType === 'animate'}" @click="changePage(nextIndex)"></button> </nav> </template> <script> 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); } }) } } </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>
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 洛谷P2251 质量检测
- React第三方组件6(状态管理之Mobx的使用④TodoList下)
- HDU 1536 S-Nim
- 洛谷P2723 丑数 Humble Numbers
- Python黑帽编程2.5 函数
- 洛谷P1317 低洼地
- ZOJ 3594 Sexagenary Cycle
- React第三方组件6(状态管理之Mobx的使用③TodoList中)
- P1554 梦中的统计
- Word2Vec教程-Skip-Gram模型模型“伪”任务关于模型的更多细节隐藏层输出层
- React第三方组件6(状态管理之Mobx的使用②TodoList上)
- The 9th Zhejiang Provincial Collegiate Programming Contest
- P1789 【Mc生存】插火把
- FOJFOJ有奖月赛-2012年4月(校赛热身赛)-解题报告总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel关联模型中过滤结果为空的结果集(has和with区别)
- php微信公众号开发之二级菜单
- django中的ajax组件教程详解
- php微信公众号开发之校园图书馆
- 查看keras的默认backend实现方式
- Python包和模块的分发详细介绍
- PHP cookie,session的使用与用户自动登录功能实现方法分析
- Python内置方法和属性应用:反射和单例(推荐)
- 使用OpenCV对车道进行实时检测的实现示例代码
- php 读取文件夹下所有图片、文件的实例
- php微信公众号开发之欢迎老朋友
- Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
- PHP使用glob方法遍历文件夹下所有文件的实例
- Python图像阈值化处理及算法比对实例解析
- 浅析Python 条件控制语句