Reusable Vue 2 transition components

vue2-transitions

Elegant, reusable Vue 2 transitions components.

Why question

  • 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 :coffee:

npm i vue2-transitions
yarn add vue2-transitions

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

Usage :rocket:

<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
  • ZoomUpTransition
  • CollapseTransition
  • ScaleTransition
  • SlideXLeftTransition
  • SlideXRightTransition
  • SlideXUpTransition
  • SlideXDownTransition

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

GitHub