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-transitionsyarn 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
Vue
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 { 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.
<!--keyed children here-->
Gotchas/things to watch:
- Elements inside
group
transitions should havedisplay: inline-block
or must be placed in a flex context: Vue.js docs reference - 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 amove
class associated with.3s
transition duration:
- Zoom
- Slide
- Scale
- Fade
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:
- Fork the repo.
- Create a new branch.
- Create a new
.vue
file (together with a folder if necessary) - Define the transition.
- Import the transition in
src/index.js
and place it in theexport default
object. - Add the name of the new transition (camelCase) in the
transitionOptions
array insideexample/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 )