동적 콘텐츠 높이를 고려한 vue 전환을 통한 원활한 확장/축소 전환

동적 콘텐츠 높이를 고려한 vue 전환을 통한 원활한 확장/축소 전환

Vue 전환에 문제가 좀 있는데, 좀 도와주실 수 있나요?내가 깨닫고 싶은 것은 vue 전이를 사용하는 단순하고 가벼운 붕괴 구성요소이다.

그러므로 나의 현재 접근법에서는 붕괴가 무너질 때마다 그것의 높이는 다음과 같이 설정되어야 한다.contentHeight그 직후에는0(확장 시 반대 방향도 마찬가지).또는 vue 트랜지션의 JavaScript 후크에서 말하는 방법:

• 입력 전: 높이를 로 설정합니다.0
• enter: 높이를 설정합니다.contentHeight
• 입력 후: 높이를 로 설정합니다.auto
• 떠나기 전: 높이를 로 설정합니다.contentHeight
• leave: 높이를 로 설정합니다.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에서 정의)이었는데, 이 프로젝트에서 볼 수 있듯이 이것은 부분적으로만 작동하며 그 이유를 알 수 없습니다.생각나는 사람 있어요?

이것이 올바른 접근법이 아닐 수도 있습니다.저는 대체 접근법이나 기존 lib에 대해 개방적인 생각을 가지고 있습니다(여기서 vue의 전이를 이해하고 싶지만).지금까지 발견한 솔루션은 다음과 같은 고정값을 사용하고 있었습니다.max-height아니면 피하고 싶은 다른 회피책도 있습니다.

잘 부탁드립니다!

확장 패널 컴포넌트는 어떻습니까?네가 정말 뭘 하고 싶은지는 모르겠지만 적어도 도움이 될 수도 있어.https://vuetifyjs.com/en/components/expansion-panels

언급URL : https://stackoverflow.com/questions/54981129/smooth-expand-collapse-transition-using-vue-transition-considering-dynamic-conte