vue2-transitions

Demo

Codesandbox

✨ 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.

License

MIT © cristijora

Special thanks to

@euvl (The UI for list transitions in the demo is inspired by vue-js-grid demo )