Vue Lazy Transition Plugin
This is a minimal Vue plugin to enable transitions or animations on scroll using custom animations and transitions defined by you.
Table of contents
- Install
- Configuration
- Usage
- Specifying CSS Transitions
- Callbacks
NEW - Adding an Observer
NEW - Global Variable
$lazyObserver
Install
npm
npm i vue-lazy-transition
yarn
yarn add vue-lazy-transition
Plugin Configuration
To use the plugin, you can choose to use the default configuration,
import Vue from 'vue'
import LazyTransition from 'vue-lazy-transition'
Vue.use(LazyTransition)
or configure it manually
import Vue from 'vue'
import LazyTransition from 'vue-lazy-transition'
// with default config
Vue.use(LazyTransition)
//OR
// with manual config
Vue.use(LazyTransition, {
options: {
root: null,
rootMargin: '0px',
threshold: [0.5, 0.75, 1]
},
intersectionRatio: 0.5
})
there are 4 items to configure:
root- (optional) - the element used as the viewport to check if elements to be transitioned are in view. if null or empty the default viewport will be used.rootMargin- (optional) - margin around the root elementthreshold- (optional) - a number or array of numbers between 0 and 1 representing the percentage of the element that must be in the viewport element before the observer triggers a transitionintersectionRatio- minimum threshold percentage for the observer declares an element is in the viewport
Usage
This Plugin can be used in two ways
Component
<template>
<lazy-transition :name="'transition-name'">
<your-component />
lazy-transition>
template>
To apply lazy-transition effects using the component syntax, wrap the component you want to apply a transition to with the name property is the name of the transition or animation you want to apply to the element. The animation will be applied when the
For Example:
<lazy-transition :name="'transition-name'">
<your-component />
lazy-transition>
Directive
There are two lazy transition directives:
v-lazytransitionv-lazytransition-groupv-lazytransition-root
v-lazytransition
When you want to apply a vue transition to a single component or HTMLElement, you simply add the v-lazytransition directive and the name of the transition you created for the element.
<template>
<your-component v-lazytransition="'transition-name'">your-component>
template>
you can use the object syntax to specify more functionality such as callbacks to be executed when the element comes into view, or if the transition is a vue trasition or a custom class you want to add to the element. or both :) discussed [here](#Using Callbacks)
v-lazytransition-group
The v-lazytransition-group should be used when you want to apply transitions on all children nodes of a parent node.
for example
<template> <div class="parent" v-lazytransition-group="'custom-transition'"> <div class="child"> ... div> <div class="child"> ... div> <div class="child"> ... div> <div class="child"> ... div> <div class="child"> ... div> div> template>
