实现element-ui的Transition组件并扩展

1.前言

element-ui中的Transition让我们实现，高度不定的情况下，平滑折叠效果非常方便，然而其只提供了垂直折叠，而水平折叠并没有提供或者当我们离开了element-ui而选择其它ui组件时，要实现这个效果就比较麻烦了。

因此我就自己写了一个类似的组件，并对此进行了扩展，其具有垂直和水平折叠功能，同时我们还可以控制其动画时长、动画过渡曲线，组件详细使用方式，请看下文

2. API

2.1 基础用法

使用collapse-transition组件将要过渡的内容包裹，并使用:show属性来控制其是否显示即可

<button @click="show = !show" style="margin-bottom: 20px;">{{show ? '垂直折叠' : '垂直展开'}}</button>
<br/>
<collapse-transition>
    <div :show="show" style="display: inline-block;">
        <div class="transition-box" v-for="i in number">collapse-transition</div>
    </div>
</collapse-transition>

export default {
    data() {
        return {
            show: true,
            number: 2,
        }
    },
    components: {
        CollapseTransition
    }
}

2.2 过渡方向

通过vertical属性来控制过渡方向，默认值为true即垂直过渡，设置为false则是水平过渡

<button @click="show = !show" style="margin-bottom: 20px;">{{show ? '水平折叠' : '水平展开'}}</button>
<br/>
<collapse-transition :vertical="false">
    <div :show="show" style="display: inline-block;">
        <div class="transition-box" v-for="i in number">collapse-transition</div>
    </div>
</collapse-transition>

export default {
    data() {
        return {
            show: true,
            number: 4,
        }
    },
    components: {
        CollapseTransition
    }
}

2.3 过渡时间

通过time属性来控制过渡时间长度，默认值为0.4，单位为s

<button @click="show = !show" style="margin-bottom: 20px;">{{show ? '垂直折叠' : '垂直展开'}}</button>
<br/>
<collapse-transition :time="2">
    <div :show="show" style="display: inline-block;">
        <div class="transition-box" v-for="i in number">collapse-transition</div>
    </div>
</collapse-transition>

export default {
    data() {
        return {
            show: true,
            number: 2,
        }
    },
    components: {
        CollapseTransition
    }
}

2.4 动画过渡曲线

通过timing属性来控制过渡动画曲线，默认值为'liner'，支持css3中transition-timing-function所有过渡曲线

<button @click="show = !show" style="margin-bottom: 20px;">{{show ? '垂直折叠' : '垂直展开'}}</button>
<br/>
<collapse-transition :time="2" timing="ease-in-out">
    <div :show="show" style="display: inline-block;">
        <div class="transition-box" v-for="i in number">collapse-transition</div>
    </div>
</collapse-transition>

export default {
    data() {
        return {
            show: true,
            number: 2,
        }
    },
    components: {
        CollapseTransition
    }
}

3. Attributes

参数	说明	类型	可选值	默认值
vertical	动画过渡方向	boolean	true/false	true
time	动画时间长度	number	-	0.4
timing	动画过渡曲线	string	-	linear

4. Events

事件名称	说明	回调参数
end	动画播放完毕时触发	-

组件整体用起来还是非常方便的，如果大家需求大的话，我就把组件的js文件下载链接放出来哈~~

后续将根据需求进行持续维护，以及将其投放至npm自定义库中~