vue-appear

0.1.3 • Public • Published

Vue Appear

Version License

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

Setting Description Type Default
immediate Set if element should appear immediately, ignoring scroll. boolean false
toggle Toggle element appearance when enters and leaves scroll view. boolean false
children Appear element children instead. boolean false
offset Offset amount before element appears. number 150
hook When should element appear in relation to the view ('onEnter', 'onCenter' or 'onLeave'). string 'onEnter'
delay How long should pass after page load before applying the appear class. number 0
class Class to add when element appears. string 'appear'
selector Query selector for children, if passed in children are appeared. string null
callback Callback function when element appears or disappears, receives a boolean argument. function null
enabled A boolean value that can be used to toggle the appearing. boolean true

Release notes

To see changes view the Changelog file.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.1.3
    4
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.1.3
    4
  • 0.1.2
    0
  • 0.1.1
    0
  • 0.1.0
    0

Package Sidebar

Install

npm i vue-appear

Weekly Downloads

4

Version

0.1.3

License

MIT

Unpacked Size

35.4 kB

Total Files

14

Last publish

Collaborators

  • dinoperovic