基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目
功能简介
基于animate.css动画库的全屏滚动,适用于vue.js(移动端、pc)项目。
安装
npm install vue-animate-fullpage --save
使用
main.js
在main.js需要引入该插件的css和js文件
import 'vue-animate-fullpage/animate.css'
import VueAnimateFullpage from 'vue-animate-fullpage'
Vue.use(VueAnimateFullpage)
template
在page-wp容器上加v-fullpage指令,v-fullpage的值是fullpage的配置 在page容器上加v-animate指令,v-animate的值是animate.css的动画效果
手动跳转到指定页:
this.$fullpage.moveTo(0, true) ;
api文档
page
每屏的选择符,默认是 .page。 必须给每页添加该选择符。
start
从第几屏开始,默认是第一屏。
duration
每屏动画的显示时间,切换页面后在duration时间过后才能再次切换下一页,默认为500ms
loop
是否支持循环滚动,默认为false
dir
滚动方向,默认为v,垂直滚动 垂直滚动:v,水平滚动:h
der
最小滑动距离,只有滑动距离大于最小滑动距离才会触发滚动效果 默认为:0.1
beforeChange
当页面在滑动后触发beforeChange 包含两个参数prev和next,指当前页面和滑动后页面的index 在beforeChange方法中return false可以阻止页面的滑动
afterChange
当页面滑动到下一页并且过了duration这个时间段后触发 包含两个参数prev和next,指当前页面和滑动后页面的index
v-animate指令的值
下面是一个典型的自定义属性
value
这个属性是一个元素的动画类型, 它的值取决于animate.css。
附上GitHub地址:https://github.com/ALazyTiger/vue-animate-fullpage
基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目的更多相关文章
- 048——VUE中使用animate.css动画库控制vue.js过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Animate.css动画库,简单的使用,以及源码剖析
animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...
- 全屏滚动-jQuery插件实现
全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...
- css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
- (生产)animate.css 动画库
官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件: &l ...
- vue中使用animate.css动画库
1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...
- 基于html5和css3响应式全屏滚动页面切换效果
分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览 源码下载 HTML wrappe ...
- Fullpage.js全屏滚动jQuery插件
兼容性: 支持 IE8+ 及其他现代浏览器. 主要功能: 1.支持鼠标滚动: 2.支持前进后退键盘控制; 3.多个回调函数; 4.支持手机.移动设备; 5.支持窗口缩放自动调整; 6.可设置滚动宽度. ...
- 八个解决你80%需求的CSS动画库
八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...
随机推荐
- 2019-02-02 Python学习——生成器杨辉三角,迭代器与可迭代对象的区别
练习 杨辉三角定义如下: 1 / \ 1 1 / \ / \ 1 2 1 / \ / \ / \ 1 3 3 1 / \ / \ / \ / \ 1 4 6 4 1 / \ / \ / \ / \ / ...
- 浅谈HTTPS和HTTP
1.HTTP和HTTPS的基本概念 HTTP:超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务端请求和应答的标准,用于WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览 ...
- C# 实现定时/循环任务
用C#实现定时/循环任务,需要使用到Quartz,在项目的NuGet包管理中可以找到并添加.一般还会伴随安装一个Log4Net,主要用它来记录在任务执行过程中遇到的问题.这边主要是讲实现定时/循环任务 ...
- Shiro授权
Shiro三种授权方式 编程式:通过写 if/else 授权代码块完成: Subject subject = SecurityUtils.getSubject(); if(subject.hasRol ...
- 想学好Python,你必须了解Python中的35个关键词
每种编程语言都会有一些特殊的单词,称为关键词.对待关键词的基本要求是,你在命名的时候要避免与之重复.本文将介绍一下Python中的关键词.关键词不是内置函数或者内置对象类型,虽然在命名的时候同样也最好 ...
- mysql8.0 解决时区问题
jdbc:mysql://localhost:3306/databaseName?useUnicode=true&characterEncoding=UTF-8&useOldAlias ...
- div嵌套引起的内层margin-top对外层div起作用
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- (私人收藏)React教程手册
React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...
- 利用CSS变量实现炫酷的悬浮效果
最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...
- python 实现汉诺塔
汉诺塔:汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘. 大梵天命令婆罗门把圆盘从下面开始按大小顺 ...