Vue Is In View
Vue.js plugin to detect when elements are and have been in the viewport For Vue 2.0.
Install
ES2015+
- Available through npm as vue-is-in-view.
import VueIsInView from 'vue-is-in-view'; Vue.use(VueIsInView);
CommonJS
- Available through npm as vue-is-in-view.
const VueIsInView = require('vue-is-in-view'); Vue.use(VueIsInView);
Direct include
- You can also directly include it with a
<script>
tag when you have Vue included globally. It will add a globalVueIsInView
which can then be installed using
Vue.use(VueIsInView);
Usage
v-is-in-view
directive
Using the <figure v-is-in-view></figure> <div v-is-in-view="{ showIfPartial: true, callback: function(element) { console.log(element, 'in view!') } }"></div>
Class conditions
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.