基于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动画库, ...
随机推荐
- 我深爱的Java,对不起,我出轨了!!!呸!渣男!
我对Java情有独钟 大学三年来,我主学的编程语言一直是Java,为了学好它,我付出了很多心血.现在回想,确实是Java改变了我,造就了我. 因为Java,我自愿在学校组织学弟学妹,给他们讲解Java ...
- 3dTiles 数据规范详解[1] 介绍
版权:转载请带原地址.https://www.cnblogs.com/onsummer/p/12799366.html @秋意正寒 Web中的三维 html5和webgl技术使得浏览器三维变成了可能. ...
- Android学习笔记添加ActionItem
ActionItem概念 案例仿知乎首页的ActionBar 一.编写布局文件activity_main.xml <?xml version="1.0" encoding=& ...
- 百度文本编辑器的toolbars属性值描述
toolbars: [ [ 'anchor', //锚点 'undo', //撤销 'redo', //重做 'bold', //加粗 ...
- cb23a_c++_标准模板库STL_set_multiset_关联容器
cb23a_c++_标准模板库STL_set_multiset_关联容器 set(集)数据不能重复.multiset(多集)可以重复.操作数据速度快,数据自动排序.红黑树(数据结构)红黑树-二叉树基本 ...
- 程序员必须掌握的Java 框架,小白学会之后15k不是问题
Spring 的核心特性是什么?Spring 优点? Spring 的核心是控制反转(IoC)和面向切面(AOP) Spring 优点: 程序员必须掌握的Java 框架,学会之后50k不是问题 (1) ...
- 入门大数据---Hbase是什么?
一.Hbase是什么? Hbase属于NoSql的一种. NoSql数据库分为如下几类: Key-Value类型数据库 这类数据库主要会使用到一个哈希表,这个表有一个特定的键和一个指针指向特定的数据. ...
- Sql sever 声明变量,赋值变量
语句: --声明变量DECLARE @idcard nvarchar () , @rowid nvarchar () --给变量赋值SELECT @idcard = '{0}', @rowid = ' ...
- 《UNIX环境高级编程》(APUE) 笔记第七章 - 进程环境
7 - 进程环境 Github 地址 1. main 函数 C 程序总是从 main 函数 开始执行: int main(int argc, char *argv[]); \(argc\) 为命令行参 ...
- 抓包工具-Charles基础使用
正在整理,等待编辑过后更新....... 竟然字少不能发不出去 那..... 现..... 在..... 够..... 了..... 吗?????? 不..... 够..... 我..... 在... ...