Skip to content
vue-plugin for in-view package
Branch: master
Clone or download
Latest commit 8a9c09b Dec 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 1. add prefix for classname, number can't been the first character in… Jul 12, 2018
.gitignore add animate.css argument and modifier Aug 27, 2017
LICENSE Initial commit Feb 8, 2017
README.md
gulpfile.js
package.json

README.md

GitHub issues GitHub forks GitHub stars GitHub license Twitter Donate HitCount contributions welcome Gitter

vue-inview

Tested

chrome firefox edge
tested tested tested

Releases version

  • v1.0.4 Beta
    1. fix : classList for old browser
  • v1.0.3 Beta
    1. fix : _$mdf is not defined
  • v1.0.2 Beta
    1. animate.css combine
    2. toggle modifier
    3. improve writing script
  • v1.0.1 [version 1.0.1]
    1. fix : undefined class

New Release

  • v1.0.5
    1. add : add class prefix

Install

npm install --save vueinview
or later version
npm install --save rachmanzz/vue-inview

Usage

Vue Directive

<element v-inview:on="methods"></element>
<div v-inview:enter="methods"></div>
<div v-inview:class="['className']"></div>
<div v-inview:class="{'page':true}"></div>
<div v-inview:style="{'background-color':'#eee'}"></div>

Directive argument & modifiers

  • on → methods ~ on DOM element enter or leave
  • once → methods ~ call one time only
  1. once.leave → methods
  2. once.class → array | object | string
  3. once.class.leave → array | object | string
  4. once.style → array | object
  5. once.style.leave → array | object
  • class → array | object | string
  1. class.leave → array | object | string
  • style → array | object
  1. style.leave → array | object
  • enter → methods
  • leave → methods

Vue Instance

const Inview = require('vueinview')
/** or **/
import Inview from 'vueinview'

Vue.use(Inview)
// Inview.offset(/* offset */)
// Inview.threshold(/* threshold */)

new Vue({
    el: '#app',
    methods:{
      methodName($v){
        /**
          * on and once argument only
            ~ el → dom element
        **/
        $v.enter = (el) => {
          /* logic code */
        }
        $v.exit = (el) => {
          /* logic code */
        }
      },
      methodName2(el){
        /**
          * enter or leave modifiers
            ~ el → dom element

            logic code here
        **/
      }
    }
  })

Inview offset & threshold

  • offset value type : number or object
  • threshold value type : only number and range between 0 - 1

readmore in https://github.com/camwiegert/in-view#inviewoffsetoffset

class & style

  • class
    1. object : {'classname': true} add class if true, remove class if false
    2. string : 'classname' add single class
    3. array : ['classname', 'classname2'] add many class
  • style
    1. object : {'background-color': '#eee', 'color':'#000'} add style
    2. array : ['background-color'] remove style

Other Way

Magic properties

set Vue Directive

<div id="viewMe" v-inview>text or other element</div>

Vue Instance

new Vue(
    {
      el : '#app',
      mounted(){
        // magic properties
        this._$inview('#viewMe', {
            enter: (el) => {
              el.style.backgroundColor = "#D93600";
              console.log("DOM element entered")
            },

            exit: (el) => {
              el.style.backgroundColor = "#000";
              console.log("DOM element leave")
            }
          })
      }
    }
  )

animate.css

Usage

  • Include stylesheet

    <head>
      <link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    </head>
    

Directive

<element v-inview:animate="'fadeIn'"></element>
<div v-inview:animate="'fadeInDown'"></div>

animation scope

  • First, define parent scope

    <div v-inview:parent="'animate'"></div>
    
  • Animate on scope

    <h2 :animate="'fadeIn'"></h2>
    <div :animate-toggle="'fadeIn'"></div>
    <div :animate-toggle-inverse="'fadeInLeft'"></div>
    <div :animate-toggle="['fadeIn', 'fadeOut']"></div>
    

check sample here https://rachmanzz.github.io/vue-inview/

star

If you like vue-inview, just give me star on this reposite https://github.com/rachmanzz/vue-inview

Gitter Chat

Gitter Learn, Ask, and give a solution problem

Credit

You can’t perform that action at this time.