Skip to content
Reusable Vue 2 transition components
Branch: master
Clone or download
cristijora Merge pull request #24 from PatrykWalach/master
Typescript type definitions fix
Latest commit 1813e5f Mar 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Flip the logic for code example's group prop Feb 27, 2019
src Fix #17 Add proper support for all native transition hooks Feb 26, 2019
static Add favicons Dec 30, 2017
types Typescript type definitions fix Mar 14, 2019
.editorconfig Initial commit Dec 29, 2017
.gitignore used ms unit Feb 13, 2019
README.md
circle.yml Initial commit Dec 29, 2017
demo.gif
package.json
yarn.lock

README.md

vue2-transitions

Demo

Codesandbox

NPM version NPM downloads CircleCI

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 )

You can’t perform that action at this time.