一个自定义折叠过渡组件，可通过自动高度和自动宽度支持平稳地扩展和折叠元素。

安装：

# NPM
$ npm install @ivanv/vue-collapse-transition --save

使用：

1.安装并导入Vue折叠过渡组件。

import CollapseTransition from 'CollapseTransition'

2.在模板中创建CollapseTransition组件。

<collapse-transition>
  <ul v-show="isOpen">
  <li>演示信息!</li>
  <li>演示信息!</li>
  <li>演示信息!</li>
  <li>演示信息!</li>
  <li>演示信息!</li>
  <li>演示信息!</li>
  </ul>
</collapse-transition>

3.启用组件。

export default {
  data() {
    return {
      isOpen = false, // 默认关闭
    }
  }
}

4.该组件还支持水平折叠。

<collapse-transition dimension="width">
  <ul v-show="isOpen">
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li>
  </ul>
</collapse-transition>

5.配置动画的持续时间。

<collapse-transition :duration="300">
  <ul v-show="isOpen">
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li>
  </ul>
</collapse-transition>

6.对过渡应用缓动功能。

<collapse-transition easing="ease-in-out">
  <ul v-show="isOpen">
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li>
  </ul>
</collapse-transition>