Nervous Penpal Message

    vue-appear

    0.1.3 • Public • Published

    Vue Appear

    Version License

    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:

    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:

    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:

    <!-- Appear once element comes into view -->
    <div v-appear></div>
     
    <!-- Appear immediately -->
    <div v-appear.immediate></div>
     
    <!-- Toggle apperance as they come into view, and leave -->
    <div v-appear.toggle></div>
     
    <!-- Appear children as they come into view -->
    <div v-appear.children>
      <h4>Title</h4>
      <p>Lorem ipsum dolor sin</p>
    </div>
     
    <!-- Combine modifiers as you wish -->
    <div v-appear.toggle.children>
      <h4>Title</h4>
      <p>Lorem ipsum dolor sin</p>
    </div>
     
    <!-- Pass in additional options -->
    <div v-appear="{
      offset: 300,
      delay: 300,
      class: 'show',
      callback: onShow,
      enabled: isAppearEnabled
    }"></div>

    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.

    Install

    npm i vue-appear

    DownloadsWeekly Downloads

    29

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    35.4 kB

    Total Files

    14

    Last publish

    Collaborators

    • dinoperovic