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自定义库中~