Vue Show

Why?

You need to show & hide vue components. Everyone does! Of course you want it to be simple and lightweight. But most of all you don't want to bloat up your app with things like custom physics-based animation frameworks or even jQuery (heaven forbid). vue-show is the answer. Read on!

Live Demo

https://h2rmone.github.io/vue-show/

Features

Powered by CSS animations. Put that on the GPU baby!

Extremely easy to control. It's all in the props!

Installation

$ yarn add vue-show
# or
$ npm install --save vue-show

Usage

import VueShow from 'vue-show'
Vue.use(VueShow)

<x-show :show="true">
Hello world!
</x-show>

API

<x-show>

The default export and main component for Vue-Show.

Props

| Prop | Required | Default Value | Description |
|:-------------------- |:-------- |:-------------- |:----------------------------------------------------------------------------- |
| show | true | false | Determines whether to "show" the content or not. |
| duration | | 500 | The transition-duration of the transition used to show the content |
| easing | | easeOutQuint | The transition-timing-function used to show the content |
| transitionProperty | | height | The transition-property used to show the content |
| unmountOnHide | | false | Determines whether the children will be unmounted when not visible. |
| transitionOnMount | | false | Determines whether to animate from a hidden to a shown state on mount |
| minHeight | | | The minimum hight of the content. Beware using with :unmount-on-hide="true"! |
| height | | | The optional fixed height of the children when open |

VueShow.easings

React-Show comes packaged with some awesome easings that are accessible via VueShow.easings. They are extremely simple to use too: