Neolithic Programming Machine

    @plutonium-js/vue-stagger

    1.0.2 • Public • Published

    Plutonium [vue.js stagger component]

    About

    An advanced Vue.js component that adds staggered CSS transition animations to child elements.

    • Stagger animate child elements / components
    • Define animations with pure CSS transitions
    • Control transitions with a simple 'show' Boolean value
    • Transitions auto reverse when changing the 'show' state while active
    • Perfect for animating drop down menus and lists

    Links

    Bookmarks

    Install

    > npm install @plutonium-js/vue-stagger
    

    🔼

    Import

    • Module

      Using ES6...

      import stagger from '@plutonium-js/vue-stagger';
      Vue.use(stagger);

      Using CommonJS...

      const stagger = require('@plutonium-js/vue-stagger').default;
      Vue.use(stagger);
    • CDN Script Tag

      Add the component directly to a web page.

      <script src="https://cdn.jsdelivr.net/npm/@plutonium-js/vue-stagger@1/dist/bundle.umd.js"></script>
      <script>
         Vue.use(window.puStagger);
      </script>

    🔼

    Instantiate

    Create new stagger instances by adding the <pu-stagger/> tag to your HTML. All child elements and components will be animated based on your transition styles and stagger properties.

    <div id="app">
       <pu-stagger
          id = "myStagger"
          tag = "div"
          :show = "show"
          :interval = "0"
          :duration = ".5"
          :reverse = "true"
          ease-type = "linear"
       >
          <div>my child element 1</div>
          <div>my child element 2</div>
          <div>my child element 3</div>
       </pu-stagger>
    </div>

    Stagger tag property options...

    • id - A custom attribute that is inherited, Stagger inherits all custom attributes.
    • tag: [string] - The tag name to use for your root stagger component element (default is 'DIV').
    • show: [bool] - when changed, staggered animation transitions start.
    • interval: [float] - This is the stagger interval (time between starting staggered transition animations).
    • duration: [float] - If defined, the interval is set to the duration divided by the child item count.
    • reverse: [bool] - This reverses the stagger direction. (e.g... when true the show transitions start at the last child element vs. the first)
    • ease-type: [string] - The stagger timing ease type ['linear', 'ease', 'quadratic', 'cubic', 'quartic', 'quintic', 'sinusoidal', 'exponential', 'circular']. Specify direction by appending '-in', '-out', or '-inout' to the name (e.g. 'ease-in').

    🔼

    Animate

    Animating Stagger instances requires CSS transitions to exist on the components child elements. Transitions are then triggered by a change in the Boolean 'show' property value.

    Add CSS transitions that target Stagger child elements as shown below...

    <style>
       #myStagger>.item {
          transition: all 1s ease;
       }
       #myStagger>.item-from {
          transform:rotate(0deg);
          opacity: 0;
       }
       #myStagger>.item-to {
          transform:rotate(360deg);
          opacity: 1;
       }
    </style>

    Stagger conditionally adds the following class names...

    • 'item' - Applied to all child elements.
    • 'item-to' - Applied to all child elements when show is true (applied on a stagger).
    • 'item-from' - Applied to all child elements when show is false (applied on a stagger).
    • 'to-ended' - Applied to the root stagger element when all 'to' transitions have ended.
    • 'from-ended' - Applied to the root stagger element when all 'from' transitions have ended.
    • 'active' - Applied when animated and only removed when all 'from' transitions end.

    Trigger Stagger transitions by changing the 'show' property...

    <script>
    	new Vue({
    	   el: '#app',
    	   data:{
    		  show:false
    	   },
    	   mounted() {
    		  //animate when mounted with a 1 second delay
    		  this.show = !this.show;
    	   }
    	});
    </script>

    The following shows the code required to create a simple stagger transition...

    <style>
       #myStagger>.item {
          transition: all 1s ease;
       }
       #myStagger>.item-from {
          transform:rotate(0deg);
          opacity: 0;
       }
       #myStagger>.item-to {
          transform:rotate(360deg);
          opacity: 1;
       }
    </style>
    
    <div id="app">
       <pu-stagger
          id = "myStagger"
          tag = "div"
          :show = "show"
          :interval = "0"
          :duration = ".5"
          :reverse = "true"
          ease-type = "linear"
       >
          <div>my child element 1</div>
          <div>my child element 2</div>
          <div>my child element 3</div>
       </pu-stagger>
    </div>
    
    <script>
    	new Vue({
    	   el: '#app',
    	   data:{
    		  show:false
    	   },
    	   mounted() {
    		  //animate when mounted with a 1 second delay
    		  this.show = !this.show;
    	   }
    	});
    </script>

    🔼

    License

    Released under the MIT license

    Author: Jesse Dalessio / Plutonium.dev

    🔼

    Install

    npm i @plutonium-js/vue-stagger

    DownloadsWeekly Downloads

    7

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    44.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • plutonium-js