Reusable Vue 2 transition Components

vue2-transitions

Reusable component transitions

Why

• Brings only the code that you need. Many alternative solutions import the whole animate.css library. Vue2-transitions is minimalistic and lets you import only the transitions that you need in your app

  Each transition component has ~2kb (non-minified js+css or ~400 bytes gzipped) and you can import only the ones you really need.

• Configurable. You can configure animation enter and leave durations as well as all the props of the native Vue transition components through props

• Easy to use. No extra classes

Install

npm i vue2-transitions
yarn add vue2-transitions

CDN: UNPKG | jsDelivr (available as window.Vue2Transitions)

Usage

<template>
   <fade-transition>
      <div class="box" v-show="show">
        <p>Fade transition</p>
      </div>
    </fade-transition>
</template>

<script>
import {FadeTransition} from 'vue2-transitions'

export default {
  components: {
    FadeTransition
  }
}
</script>

Global usage

import Transitions from 'vue2-transitions'
Vue.use(Transitions)

List of available transitions

• FadeTransition
• ZoomCenterTransition
• ZoomXTransition
• ZoomYTransition
• CollapseTransition
• ScaleTransition
• SlideXLeftTransition
• SlideXRightTransition
• SlideYUpTransition
• SlideYDownTransition

Props

props: {
  /**
   * Transition duration. Number for specifying the same duration for enter/leave transitions
   * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
   */
  duration: {
    type: [Number, Object],
    default: 300
  },  
  /**
   * Whether the component should be a `transition-group` component.
   */
  group: Boolean,
  /**
   * Transition tag, in case the component is a `transition-group`
   */
  tag: {
    type: String,
    default: 'span'
  },
  /**
   *  Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/.
   *  Can be specified with styles as well but it's shorter with this prop
   */
  origin: {
    type: String,
    default: ''
  },
  /**
   * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
   */
  styles: {
    type: Object,
    default: () => {
      return {
        animationFillMode: 'both',  
        animationTimingFunction: 'ease-out'
      }
    }
  }
}

Group transitions

Each transition can be used as a transition-group by adding the group prop to one of the desired transitions.

<fade-transition group>
   <!--keyed children here-->
</fade-transition>

Gotchas/things to watch:

1. Elements inside group transitions should have display: inline-block or must be placed in a flex context: Vue.js docs reference
2. Each transition has a move class move class docs. Unfortunately the duration for the move transition cannot be configured through props. By default each transition has a move class associated with .3s transition duration:

• Zoom

   .zoom-move{
     transition: transform .3s ease-out;
   }
  

• Slide

    .slide-move{
      transition: transform .3s ease-out;
    }
  

• Scale

   .scale-move{
       transition: transform .3s cubic-bezier(.25,.8,.50,1);
     }
  

• Fade

  .fade-move{
      transition: transform .3s ease-out;
    }
  

If you want to configure the duration, just redefine the class for the transition you use with the desired duration.

Contribution

Defining a new transition

The codebase is fairly simple and contains mostly .vue components. If you want to add a new transition to the collection follow these steps:

1. Fork the repo.

2. Create a new branch.

3. Create a new .vue file (together with a folder if necessary)

4. Define the transition.

    <template>
      <component :is="componentType"
                  v-bind="$attrs"
                  v-on="hooks"
                  enter-active-class="enterAnimationClassHere"
                  move-class="move-class"
                  leave-active-class="leaveAnimationClassHere">
        <slot></slot>
      </component>
    </template>
    <script>
      import {baseTransition} from '../mixins/index.js'
      export default {
        name: 'transition-name-here',
        mixins: [baseTransition]
      }
    </script>
    <style>
     // Your styles for animations here.
    </style>
   

5. Import the transition in src/index.js and place it in the export default object.

6. Add the name of the new transition (camelCase) in the transitionOptions array inside example/App.vue

Besides the properties described above, you can pass in any other Transition props or events Note Overriding hooks (especially beforeEnter or beforeLeave) may cause unwanted effects.

Demo

Codesandbox

Download Details:

Author: BinarCode

Live Demo: https://binarcode.github.io/vue2-transitions/

GitHub: https://github.com/BinarCode/vue2-transitions

#vuejs #javascript #vue #vue-js