考虑到动态内容高度,使用 vue 过渡平滑展开/折叠过渡

Posted

技术标签:

【中文标题】考虑到动态内容高度,使用 vue 过渡平滑展开/折叠过渡【英文标题】:Smooth expand/collapse transition using vue transition considering dynamic content heights 【发布时间】:2019-07-25 15:22:46 【问题描述】:

我在 vue 转换方面遇到了一些问题,也许你们中的一些人可以帮助我?!我想要实现的是一个使用 vue 转换的简单、轻量级的折叠组件。

因此,在我目前的方法中,每次折叠折叠时,它的高度都应设置为contentHeight,然后立即设置为0(以及展开时的相反方式)。或者说一下 vue transition 的 javascript hooks:

进入前:将高度设置为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 的修复值或我想避免的其他解决方法。

提前感谢您的帮助!

【问题讨论】:

【参考方案1】:

扩展面板组件怎么样?我不确定你真正想做什么,但它至少可以帮助你。 https://vuetifyjs.com/en/components/expansion-panels

【讨论】:

您好,谢谢您的建议。上面描述的折叠组件应该可以在其他组件中重用并且不应该有任何自己的样式(除了必要的heightoverflow)并且只负责任何动态内容的折叠/展开过渡。有点类似于vue-collapse,但没有修复max-height 和更简化的功能。

以上是关于考虑到动态内容高度,使用 vue 过渡平滑展开/折叠过渡的主要内容,如果未能解决你的问题,请参考以下文章

Vue/CSS,如何在两个交替元素之间进行平滑的高度过渡(包括小提琴)

vue循环实现锚点点击并平滑过渡

DIV+css内容太长,怎么实现点击展开余下全文

ECharts 折线图 设置平滑和颜色

需要帮助获得平滑的文本内容 CSS 过渡

如何实现不同斜率边坡的平滑过渡