1.0.2 • Published 3 years ago
@dcasia/vue-aos v1.0.2
Vue AOS
Implementing animation on scroll based on Vue 3
How to use
- Install it from NPM
npm i @dcasia/vue-aos --save- Import and register it in your Vue entry file
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueAOS from '@dcasia/vue-aos'
import '@dcasia/vue-aos/dist/vue-aos.css'
createApp(App)
.use(VueAOS, {
disable: false,
isBrowser: true,
anchorPlacement: 'center-bottom',
once: true,
duration: 1000,
easing: 'ease-out',
offset: 0,
startEvent: 'init-aos',
disableMutationObserver: false
})
.mount('#app')- Feel free to use it in your Vue template
// app.vue
<AOS>
<div>
I'll be animated when you see me in the viewport
</div>
</AOS>Options
Global Options
| Name | Type | Functionality |
|---|---|---|
| disable | Boolean | Whether to disable the effect globally |
| isBrowser | Boolean | Whether the current environment is a browser environment |
| anchorPlacement | …. | |
| once | Boolean | Whether only have elements fade in and without fading out |
| duration | Number | Animation duration |
| easing | … | Animation easing type |
| offset | Number | Distance from the trigger point, can be negative |
| startEvent | String | Name of the event dispatched on the document, that AOS should initialize on |
| disableMutationObserver | Boolean | Disables automatic mutations' detections |
| … | … | … |
Component Options
Options for single instance
| Name | Type | Functionality | |
|---|---|---|---|
| type | String | Animation type | |
| easing | String | Animation easing type | |
| duration | Number | String | Animation duration | |
| offset | Number | String | Distance from the trigger point, can be negative | |
| delay | Number | String | Animation delay | |
| anchor | String | The name of the specified trigger anchor point | |
| anchorPlacement | … | The position of the trigger point, taken from several key positions of the element and viewport | |
| order | Number | String | The sequential animation order, it basically automatically calculate delay for current instance | |
| step | Number | String | The Interval delay between different order | |
| isGroup | Boolean | Whether to create a container element | |
| tag | String | The tag name of the container | |
| disableAnimation | Boolean | Disable animation on current instance but still can be triggered and emit key events | |
| once | Boolean | Whether only have elements fade in and without fading out | |
| persistentAttributes | Boolean | Whether to retain aos custom attributes and class names after animation is done | |
| hiddenOnServer | Boolean | Whether to hide itself on server side rendering to make it hidden at the very first beginning when it’s showing on client side |
API
...