vue-in-viewport-directive
v2.0.2
Published
Vue 2 directive that adds css classes when the element is the viewport
Downloads
2,513
Readme
Vue In Viewport Directive
Vue 2 directive that sets CSS classes on its host element based on the elements current position in the viewport. These classes are:
in-viewport
- Some part of the element is within the viewportabove-viewport
- Some part of the element is above the viewportbelow-viewport
- Some part of the element is below the viewport
You may want to check out the mixin vesion of this package: vue-in-viewport-mixin.
Demo: https://bkwld.github.io/vue-in-viewport-directive
Usage
Note, this should not be applied to elements / components that are setting a dynamic class through Vue. See this issue.
Register the directive:
import Vue from 'vue' import inViewportDirective from 'vue-in-viewport-directive' Vue.directive('in-viewport', inViewportDirective)
Use the classes to trigger CSS transitions (for instance):
<div class='box' v-in-viewport></div> <div class='box' v-in-viewport.once='-100px 0px'></div> <div class='box' v-in-viewport.once='{ margin: "-10% 0%" }'></div>
.box { opacity: 0; transition: opacity .3s; } .box.in-viewport { opacity: 1; }
Set default offsets:
import inViewportDirective from 'vue-in-viewport-directive'
inViewportDirective.defaults.margin = '-10% 0%'
Vue.directive('in-viewport', inViewportDirective)
- Compatibility note: This package requires IE >= 10 because it uses
classList
. Polyfill classList if you need to support older browsers. - Compatibility note: This package a polyfill for IntersectionObserver in browsers like IE.
Global methods
You can disable all updates and re-enable them globally:
import { enable, disable } from 'vue-in-viewport-directive'
disable()
setTimeout(enable, 500)
This can be used during full page transitions to trigger all the in viewport transitions only once the page transition finishes.
Arguments
Modifiers
once
- Whether to remove listeners once the element enters viewport. If the element is in viewport when mounted, listeners are never added.
Value
Set the value to a string in the style of IntersectionObserver rootMargin to apply an offset to when the in viewport classes get added.
<div v-in-viewport='-100px 0px'></div>
Or, set it via an option:
<div v-in-viewport='{ margin: "-100px 0px" }'></div>
Conditionally disable with
disabled
:<div v-in-viewport='{ disabled: true }'></div>
Tests
- Start Storybook:
yarn storybook
- Open Cypress:
yarn cypress open
The Travis tests that run on deploy run against the demo site which gets updated as part of the npm version