vue-appear v0.1.3

Vue Appear

Vue directive that helps you appear stuff as it comes into view.

This is simply a helper that adds a class to your desiered elements, actual appearing should be done using CSS.

Quickstart

Installation

Install with your preffered package manager:

npm install --save vue-appear
# or
yarn add vue-appear

Setup

Once installed register the plugin with Vue:

import Vue from 'vue'
import VueAppear from 'vue-appear'

Vue.use(VueAppear)

If you wish to override default settings you can pass in the options as a second argument:

Vue.use(VueAppear, {
  immediate: false,
  toggle: false,
  children: false,
  offset: 150,
  hook: 'onEnter',
  delay: 0,
  class: 'appear',
  selector: null,
  callback: () => {}
})

Usage in templates

To make elements appear in your templates:

<!-- Appear once element comes into view -->
<div v-appear></div>

<!-- Appear immediately -->
<div v-appear.immediate></div>

<!-- Toggle apperance as they come into view, and leave -->
<div v-appear.toggle></div>

<!-- Appear children as they come into view -->
<div v-appear.children>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sin</p>
</div>

<!-- Combine modifiers as you wish -->
<div v-appear.toggle.children>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sin</p>
</div>

<!-- Pass in additional options -->
<div v-appear="{
  offset: 300,
  delay: 300,
  class: 'show',
  callback: onShow,
  enabled: isAppearEnabled
}"></div>

API Options

Release notes

To see changes view the Changelog file.