# vue-collapse-transition

> A collapse transition plugin for vue

Latest version **1.0.0** (published 2018-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-collapse-transition
pnpm add vue-collapse-transition
yarn add vue-collapse-transition
bun add vue-collapse-transition
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-09-10 |
| First published | 2018-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | HanrongLiao |
| Maintainers | leoliao |

## Links

- npm: https://www.npmjs.com/package/vue-collapse-transition
- npm.io page: https://npm.io/package/vue-collapse-transition

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.11

## Recent versions

- 1.0.0 (latest) — 2018-09-10

## README

在没有设定元素高度的情况下基于vue实现 `展开/收起` 动画过渡插件vue-collapse-transition，插件实现原理是利用 `vue` 过渡动画的事件钩子，计算元素的高度并添加或删除元素的类名`collapse-transition`而实现。

## 安装
```bash
    npm install vue-collapse-transition --save
```
## 使用
```js
// js
import Vue from 'vue'
import vueCollapseTransition from 'vue-collapse-transition'
Vue.use(vueCollapseTransition)
```
```html
<!--html-->
<transition @beforeEnter="$collapse.beforeEnter"
                  @enter="$collapse.enter"
                  @afterEnter="$collapse.afterEnter"
                  @beforeLeave="$collapse.beforeLeave"
                  @leave="$collapse.leave"
                  @afterLeave="$collapse.afterEnter">
        <div v-show="show">
          <div class="demo-content">
           vue collapse transition!
          </div>
        </div>
</transition>
```
```css
.collapse-transition { // 必须
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.demo-content {
    width: 50px;
    font-size: 18px;
    white-space: pre-wrap;
    word-break: break-all;
  }
```

---
_Source: https://npm.io/package/vue-collapse-transition · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._