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

1,362 阅读2分钟

1.前言

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

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

2. API

2.1 基础用法

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

动画.gif

<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则是水平过渡

动画.gif

<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

动画.gif

<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所有过渡曲线

动画.gif

<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动画过渡方向booleantrue/falsetrue
time动画时间长度number-0.4
timing动画过渡曲线string-linear

4. Events

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

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

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