Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue-in-viewport-directive

BKWLD2.9kMIT2.0.2

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

readme

Vue In Viewport Directive Build Status

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 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

  1. Start Storybook: yarn storybook
  2. 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