功能简介

基于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的动画效果

    <div class="fullpage-container">
      <div class="fullpage-wp" v-fullpage="opts">
        <div class="page-1 page">
          <p class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage</p>
        </div>
        <div class="page-2 page">
          <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
        </div>
        <div class="page-3 page">
          <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">vue-fullpage</p>
        </div>
      </div>
    </div>
export default {
 
  data() {
    return {
      opts: {
          start: 0,
          dir: 'v',
          loop: false,
          duration: 500,
          beforeChange: (prev, next)=> {
            console.log('before', prev, next)
          },
          afterChange: (prev, next)=> {
            console.log('after', prev, next)
          }
      }
    }
  }
}

手动跳转到指定页:

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:'bounceInLeft',
    delay: 0
}
value

这个属性是一个元素的动画类型, 它的值取决于animate.css。

附上GitHub地址:https://github.com/ALazyTiger/vue-animate-fullpage

基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目的更多相关文章

  1. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Animate.css动画库,简单的使用,以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  3. 全屏滚动-jQuery插件实现

    全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...

  4. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  5. (生产)animate.css 动画库

    官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件:    &l ...

  6. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

  7. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  8. Fullpage.js全屏滚动jQuery插件

    兼容性: 支持 IE8+ 及其他现代浏览器. 主要功能: 1.支持鼠标滚动: 2.支持前进后退键盘控制; 3.多个回调函数; 4.支持手机.移动设备; 5.支持窗口缩放自动调整; 6.可设置滚动宽度. ...

  9. 八个解决你80%需求的CSS动画库

    八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...

随机推荐

  1. 我深爱的Java,对不起,我出轨了!!!呸!渣男!

    我对Java情有独钟 大学三年来,我主学的编程语言一直是Java,为了学好它,我付出了很多心血.现在回想,确实是Java改变了我,造就了我. 因为Java,我自愿在学校组织学弟学妹,给他们讲解Java ...

  2. 3dTiles 数据规范详解[1] 介绍

    版权:转载请带原地址.https://www.cnblogs.com/onsummer/p/12799366.html @秋意正寒 Web中的三维 html5和webgl技术使得浏览器三维变成了可能. ...

  3. Android学习笔记添加ActionItem

    ActionItem概念 案例仿知乎首页的ActionBar 一.编写布局文件activity_main.xml <?xml version="1.0" encoding=& ...

  4. 百度文本编辑器的toolbars属性值描述

    toolbars: [    [        'anchor', //锚点        'undo', //撤销        'redo', //重做        'bold', //加粗   ...

  5. cb23a_c++_标准模板库STL_set_multiset_关联容器

    cb23a_c++_标准模板库STL_set_multiset_关联容器 set(集)数据不能重复.multiset(多集)可以重复.操作数据速度快,数据自动排序.红黑树(数据结构)红黑树-二叉树基本 ...

  6. 程序员必须掌握的Java 框架,小白学会之后15k不是问题

    Spring 的核心特性是什么?Spring 优点? Spring 的核心是控制反转(IoC)和面向切面(AOP) Spring 优点: 程序员必须掌握的Java 框架,学会之后50k不是问题 (1) ...

  7. 入门大数据---Hbase是什么?

    一.Hbase是什么? Hbase属于NoSql的一种. NoSql数据库分为如下几类: Key-Value类型数据库 这类数据库主要会使用到一个哈希表,这个表有一个特定的键和一个指针指向特定的数据. ...

  8. Sql sever 声明变量,赋值变量

    语句: --声明变量DECLARE @idcard nvarchar () , @rowid nvarchar () --给变量赋值SELECT @idcard = '{0}', @rowid = ' ...

  9. 《UNIX环境高级编程》(APUE) 笔记第七章 - 进程环境

    7 - 进程环境 Github 地址 1. main 函数 C 程序总是从 main 函数 开始执行: int main(int argc, char *argv[]); \(argc\) 为命令行参 ...

  10. 抓包工具-Charles基础使用

    正在整理,等待编辑过后更新....... 竟然字少不能发不出去 那..... 现..... 在..... 够..... 了..... 吗?????? 不..... 够..... 我..... 在... ...