https://github.com/dinoperovic/vue-appear
🙈 Vue directive that helps you appear stuff as it comes into view.
https://github.com/dinoperovic/vue-appear
appear reveal scroll vue vuejs
Last synced: 10 months ago
JSON representation
🙈 Vue directive that helps you appear stuff as it comes into view.
- Host: GitHub
- URL: https://github.com/dinoperovic/vue-appear
- Owner: dinoperovic
- License: mit
- Created: 2019-05-08T10:52:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T21:42:16.000Z (over 3 years ago)
- Last Synced: 2024-12-14T13:18:57.522Z (over 1 year ago)
- Topics: appear, reveal, scroll, vue, vuejs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-appear
- Size: 1.68 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Appear
[](https://www.npmjs.com/package/vue-appear)
[](https://www.npmjs.com/package/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:
```bash
npm install --save vue-appear
# or
yarn add vue-appear
```
### Setup
Once installed register the plugin with [Vue]:
```js
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:
```js
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:
```html
Title
Lorem ipsum dolor sin
Title
Lorem ipsum dolor sin
```
## 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.
[Vue]: https://vuejs.org/
[Changelog]: https://github.com/dinoperovic/vue-appear/blob/master/CHANGELOG.md