https://github.com/kahirokunn/vue-slide-up-down-component

https://github.com/kahirokunn/vue-slide-up-down-component

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/kahirokunn/vue-slide-up-down-component
• Owner: kahirokunn
• License: mit
• Created: 2018-08-23T02:23:06.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-27T09:21:46.000Z (over 5 years ago)
• Last Synced: 2024-04-09T13:41:55.375Z (about 2 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-slide-up-down-component
• awesome-vue - vue-slide-up-down-component ★3

README

        
# vue-slide-up-down-component

Like jQuery's [`slideUp`](http://api.jquery.com/slideup/) / [`slideDown`](http://api.jquery.com/slidedown/), but for [Vue](vuejs.org)!

[DEMO](https://jsfiddle.net/kahirokunn/qjyd6935/50)

## Installation

```sh

npm i vue-slide-up-down-component

```

Usage with Webpack or other module bundlers:

```js

import VueSlideUpDown from 'vue-slide-up-down-component'

// or

const VueSlideUpDown = require('vue-slide-up-down-component')

Vue.component('vue-slide-up-down', VueSlideUpDown)

```

## Usage

The component takes three props:

- `active` (Boolean): Whether to show the component (`true`) or not (`false`)

- `duration` (Number): How long the animation is supposed to be, in milliseconds. Defaults to `500`.

- `tag` (String): Which HTML tag to use for the wrapper element. Defaults to `div`.

```html



  
Always show this

  

    Only show this if "active” is true

  



```


### Custom `transition-timing-function`

If you want to use a different timing function, add some CSS for your `` element. (See `demo/index.html` for a full example.)

```html

  .wobbly-accordeon {

    transition-timing-function: cubic-bezier(0.195, 1.650, 0.435, -0.600);

  }

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.

```

## Also

This currently works by measuring the `offsetHeight` and then CSS-transitioning to the target height or back to `0px`. This works _okay_, but is not very performant. If you have other ideas how to make this extremely smooth and good looking, feel free to send issues or pull requests.