javascript - 考虑到动态内容高度,使用 vue 过渡平滑展开/折叠过渡
问题描述
我在 vue 转换方面遇到了一些麻烦,也许你们中的一些人可以帮助我?!我想要实现的是一个使用 vue 转换的简单、轻量级的折叠组件。
因此,在我目前的方法中,每次折叠折叠时,它的高度都应该设置为contentHeight
,然后在此之后立即设置为0
(以及在展开时反过来)。或者用 vue transition 的 JavaScript 钩子说:
- 输入前:将高度设置为
0
- 输入:将高度设置为
contentHeight
- 输入后:将高度设置为
auto
- 离开前:将高度设置为
contentHeight
- 离开:将高度设置为
0
这是当前的方法:
<template>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<div
v-if="isCollapsed === false"
:style="componentStyles"
class="UiCollapse"
>
<div
ref="content"
class="UiCollapse-content"
>
<slot/>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "UiCollapse",
props: {
isCollapsed: {
type: Boolean,
default: false
}
},
data() {
return {
componentStyles: {
height: undefined
}
};
},
methods: {
beforeEnter() {
this.setHeight(0);
},
enter() {
this.setHeight(this.getContentHeight());
},
afterEnter() {
this.setHeight(undefined);
},
beforeLeave() {
this.setHeight(this.getContentHeight());
},
leave() {
this.setHeight(0);
},
afterLeave() {
this.setHeight(0);
},
setHeight(height) {
this.componentStyles.height = height;
},
getContentHeight() {
return this.$refs.content.scrollHeight + "px";
}
}
};
</script>
<style scoped>
.UiCollapse {
display: block;
height: auto;
overflow: hidden;
}
.UiCollapse.v-enter-active,
.UiCollapse.v-leave-active {
transition: height 0.3s ease;
}
.UiCollapse-content {
display: block;
}
</style>
使用这种方法,应该考虑内容的动态高度和影响其高度的内容变化。
我还把它转移到了一个密码箱:https ://codesandbox.io/s/yq1nw51yq9
我在这里期望的是一个平滑的打开和关闭过渡(如 css 中定义的那样),但正如您在这个项目中看到的那样,这只是部分工作,我不明白为什么。你们有什么想法吗?
也许这不是正确的方法,我对替代方法或已经存在的库持开放态度(尽管我更愿意在这里了解 vue 转换),但到目前为止我发现的解决方案是使用修复值max-height
或其他解决方法喜欢避免。
在此先感谢您的帮助!
解决方案
扩展面板组件呢?我不确定你真正想做什么,但它至少可以帮助你。https://vuetifyjs.com/en/components/expansion-panels
推荐阅读
- r - 为什么 R 中的插补函数会发生此错误?
- matlab - 在 matlab 上配置和训练后,如何使用神经网络运行预测?
- javascript - 反应:将双色滑块拇指设置为具有透明背景的图像
- r - 我怎样才能看到动画结果?
- python - 如何用颜色图填充曲线和原点边缘之间的区域?
- git - 获取所有 git 项目成员 (gforge)
- python - 我应该如何解决它?只有 size-1 的数组可以转换为 Python 标量
- php - 如何在环境中的 MVC PHPMailer 上为另一封电子邮件创建新方法或实例?
- coq - Coq 中的空集函数
- clojure - 如何在重新框架模板中运行后端服务器/代码?