v-in-class

Add class

Usage no npm install needed!

<script type="module">
  import vInClass from 'https://cdn.skypack.dev/v-in-class';
</script>

README

v-in-class

This uses Intersection Observer

This a work in progress and a copy of vue-observe-visibility to make a simple add class or call function if visible on viewport

For the class this is specific to use with animatecss. Tip, problably best to add opacity 0 class/style for some animations like fade, zoomin etc...

DEMO

DEMO (TODO)

Installation

npm install --save v-in-class

or

yarn add v-in-class

import with bundler

import Vue from 'vue'
import vIc from 'v-in-class'

Vue.use(vIc)

Usage

todo: need to improve...

<p v-ic="'what-class-to-add'">

<p v-ic="what_func_to_exec">

methods: {
  what_func_to_exec(visibility, el) {}
}

visibility (Boolean) curent visibility state & el, the current element

This 2 just run once

If ou need multi use ".multi"

<p v-ic.multi="'what-class-to-add'">

Attributes

Use rm as rootMargin percentage (-negative buttom and possitive top) default: -5% 0px 0px 5%

<p v-ic="'what-class-to-add'" rm="12">

animation-delay in ms

<p v-ic="'what-class-to-add'" del="3000">

animation-duration in ms

<p v-ic="'what-class-to-add'" dur="3000">

Plain vue

  <script type="text/javascript" src="//unpkg.com/vue"></script>
  <script src='v-in-class.min.js'></script>

License

MIT