Vue.js plugin to detect when elements are and have been in the viewport
Vue.js plugin to detect when elements are and have been in the viewport For Vue 2.0.
import VueIsInView from 'vue-is-in-view';
Vue.use(VueIsInView);
const VueIsInView = require('vue-is-in-view');
Vue.use(VueIsInView);
<script>
tag when you have Vue included globally.VueIsInView
which can then be installed using Vue.use(VueIsInView);
v-is-in-view
directive <figure v-is-in-view></figure>
<div v-is-in-view="{
showIfPartial: true,
callback: function(element) { console.log(element, 'in view!') }
}"></div>
Class | Condition |
---|---|
is-in-view | Applied when all of the element is in the viewport |
has-been-in-view | Applied after the whole of an element has been in the viewport once |
is-partially-in-view | *Applied when any part of an element is in the viewport |
has-been-partially-in-view | *Applied after any part of an element has been in the viewport |
* Only available when the showIfPartial
key is true
in the configuration object, see above.