v-in-class
This uses Intersection Observer
This a work in progress and a copy of vue-observe-visibility to make a simple add class or call function if visible on viewport
For the class this is specific to use with animatecss. Tip, problably best to add opacity 0 class/style for some animations like fade, zoomin etc...
DEMO
DEMO (TODO)
Installation
npm install --save v-in-class
or
yarn add v-in-class
import with bundler
import Vue from 'vue'
import vIc from 'v-in-class'
Vue.use(vIc)Usage
todo: need to improve...
<p v-ic="'what-class-to-add'"><p v-ic="what_func_to_exec">methods: {
what_func_to_exec(visibility, el) {}
}visibility (Boolean) curent visibility state & el, the current element
This 2 just run once
If ou need multi use ".multi"
<p v-ic.multi="'what-class-to-add'">Attributes
Use rm as rootMargin percentage (-negative buttom and possitive top) default: -5% 0px 0px 5%
<p v-ic="'what-class-to-add'" rm="12">animation-delay in ms
<p v-ic="'what-class-to-add'" del="3000">animation-duration in ms
<p v-ic="'what-class-to-add'" dur="3000">Plain vue
<script type="text/javascript" src="//unpkg.com/vue"></script>
<script src='v-in-class.min.js'></script>