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:
Vue
If you wish to override default settings you can pass in the options as a second argument:
Vue
Usage in templates
To make elements appear in your templates:
<!-- Appear once element comes into view --> <!-- Appear immediately --> <!-- Toggle apperance as they come into view, and leave --> <!-- Appear children as they come into view --> Title Lorem ipsum dolor sin <!-- Combine modifiers as you wish --> Title Lorem ipsum dolor sin <!-- Pass in additional options -->
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.