vueinview
v1.0.7
Published
vue in-view
Downloads
1,863
Readme
vue-inview
Tested
|chrome|firefox|edge| |------|-------|------| |tested|tested|tested|
Releases version
- v1.0.5
- add : add class prefix
- v1.0.4 Beta
- fix : classList for old browser
- v1.0.3 Beta
- fix : _$mdf is not defined
New Release
- v1.0.6-beta.1
- add : add inview component
Install
latest
npm install --save vueinviewbeta
npm install --save [email protected]
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 leaveonce→ methods ~ call one time only
once.leave→ methodsonce.class→ array | object | stringonce.class.leave→ array | object | stringonce.style→ array | objectonce.style.leave→ array | object
class→ array | object | string
class.leave→ array | object | string
style→ array | object
style.leave→ array | object
enter→ methodsleave→ 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
- object :
{'classname': true}add class if true, remove class if false - string :
'classname'add single class - array :
['classname', 'classname2']add many class
- object :
- style
- object :
{'background-color': '#eee', 'color':'#000'}add style - array :
['background-color']remove style
- object :
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/
Components [new]
Import component
import inview from 'vueinview/components/Inview'
Bind Attribute
- enter → function → optional
- leave → function → optional
slot
- name: inview
- slot-scope
- action → text
- ``
enterleave
- hasEnter → boolean
- hasLeave → boolean
- action → text
usage
<inview> <template slot="inview" slot-scope="{ action, hasEnter, hasLeave }"> <div>{{action === 'enter' ? 'element entered': ''}}</div> </template> </inview>
star
If you like vue-inview, just give me star on this reposite https://github.com/rachmanzz/vue-inview
Gitter Chat
Learn, Ask, and give a solution problem
Credit
- this vue-inview base on https://github.com/camwiegert/in-view
- shortid module https://github.com/dylang/shortid
- animate module https://github.com/daneden/animate.css