Skip to content

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

License

Notifications You must be signed in to change notification settings

dinoperovic/vue-appear

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published