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

Question

我在 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>

通过这种方法，应该考虑内容的动态高度和影响其高度的内容变化。

我也把它转移到一个codesandbox:https://codesandbox.io/s/yq1nw51yq9

我在这里期望的是平滑的打开和关闭过渡(如 css 中所定义)，但正如您在该元素中看到的那样，这仅部分起作用，我不明白为什么。你们有什么想法吗？

也许这不是正确的方法，我对替代方法或已经存在的库持开放态度(尽管我更愿意在这里理解 vue 转换)，但到目前为止我找到的解决方案是为 使用固定值max-height 或我想避免的其他解决方法。

预先感谢您的帮助!

Answer 1

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