基於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/dist/animate.css'

import VueAnimateFullpage from 'vue-animate-fullpage/dist/index'

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