vue-in-viewport-directive

KO | EN

gitlite — search

#react #typescript #golang #deep-learning #docker #macos #nodejs #windows #cli #kubernetes #vue #security #pytorch #open-source

vue-in-viewport-directive

(★ 119)

Vue 2 directive that adds css classes when the element is the viewport

File Explorer

Download Latest Version (.zip)

- addons.js
- config.js
- webpack.config.js
- - example.json
- - initially-visible.coffee
  - scroll-to-reveal.coffee
  - trigger-late.coffee
- - index.js
- - commands.coffee
  - index.js
  - vars.coffee
- - Always.vue
  - Once.vue
  - Shorthand.vue
  - styles.css
- index.stories.js
.babelrc
.gitignore
.nvmrc
.travis.yml
cypress.json
index.coffee
index.js
LICENSE
package.json
README.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue In Viewport Directive [![Build Status](https://travis-ci.org/BKWLD/vue-in-viewport-directive.svg?branch=master)](https://travis-ci.org/BKWLD/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 viewport
- `above-viewport` - Some part of the element is above the viewport
- `below-viewport` - Some part of the element is below the viewport

You may want to check out the mixin version of this package: [vue-in-viewport-mixin](https://github.com/BKWLD/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](https://github.com/BKWLD/vue-in-viewport-directive/issues/4).

* Register the directive:
	```js
	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):
	```html
	<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>
	```
	```css
	.box {
		opacity: 0;
		transition: opacity .3s;
	}
	.box.in-viewport {
		opacity: 1;
	}
	```

* Set default offsets:
```js
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](https://github.com/eligrey/classList.js) if you need to support older browsers.
*	*Compatibility note*: This package a [polyfill for IntersectionObserver](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) in browsers like IE.

#### Global methods

You can disable all updates and re-enable them globally:

```js
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](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#Parameters) to apply an offset to when the in viewport classes get added.
	```html
	<div v-in-viewport="'-100px 0px'"></div>
	```

- Or, set it via an option:
	```html
	<div v-in-viewport='{ margin: "-100px 0px" }'></div>
	```
	
- Conditionally disable with `disabled`:
	```html
	<div v-in-viewport='{ disabled: true }'></div>
	```

## Tests

1. Start Storybook: `yarn storybook`
2. Open Cypress: `yarn cypress open`

The Travis tests that run on deploy run against [the demo site](https://bkwld.github.io/vue-in-viewport-mixin) which gets updated as part of the `npm version`

vue-in-viewport-directive

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

vue-in-viewport-directive

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README