Vue 过渡组问题：过渡时 v-for 对象的最后一项溢出容器答案

【问题标题】：Vue Transition Group issue: last item of v-for object overflows out of container when transitioningVue 过渡组问题：过渡时 v-for 对象的最后一项溢出容器
【发布时间】：2022-12-11 08:22:11
【问题描述】：

从下面的代码中可以看出，我正在尝试应用群转移在物体上反馈显示.

一切正常，除非我尝试转换列表的最后一项，它会溢出 #feedback-list div 容器。

我无法在包含的 div 上使用 overflow-hidden，因为我使用的工具提示会在悬停反馈项时从容器中溢出（这部分代码未在此处显示为微不足道）。

在发布没有成功之前，我到处寻找答案。

<FadeTransition group class="tw-relative tw-hidden lg:tw-block tw-text-xs tw-text-light-grey-blue tw-font-semibold tw-mt-1"  id="feedback-list">
 <div v-for="feedback in feedbacksToShow"
  :key="feedback[0].feedbackable_type"
  class="'tw-w-full tw-flex lg:tw-justify-between tw-gap-x-2 tw-mt-2'
 >
  <span>{{ getCostTypeTitle(feedback[0]["feedbackable_type"]) }}</span>
  <span class="tw-text-yellow-400 hover:tw-text-yellow-500">
   See {{ getCostTypeFeedbackCount(feedback) }}
  </span>
 </div>
</FadeTransition>

<template>
  <component :is="group ? 'transition-group' : 'transition'"
             :tag="tag"
             name="fade"
             v-bind="$attrs"
             v-on="hooks"
  >
    <slot></slot>
  </component>
</template>

<script>

  import { Transition, TransitionGroup } from 'vue';

  export default {
    components: {
      Transition,
      TransitionGroup,
    },
    props: {
      group: {
        type: Boolean,
        default: false
      },
      tag: {
        type: String,
        default: "div"
      }
    },
    computed: {
      hooks() {
        return {
          leave: this.setAbsolutePosition
        }
      }
    },
    methods: {
      setAbsolutePosition(el) {
        if (this.group) {
          el.style.position = "absolute";
        }
      }
    }
  };
</script>

<style>
  .fade-move,
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.4s ease-in-out;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>

任何形式的指导将不胜感激

【问题讨论】：

标签： vue.js vue-transitions vuejs-transition-group

【解决方案1】：

我遇到了类似的问题，从过渡组中删除一个项目会将所有项目向下推，导致临时溢出和滚动条出现和消失。当内容实际上比容器大时，我仍然希望我的容器可以滚动，所以 overflow: hidden 对我也没有好处。这种烦人的行为也可以在 Vue 文档的示例中重复出现。

我使用的解决方法是检查容器在转换之前是否溢出。如果没有溢出，则在转换期间防止溢出。这非常适合我的情况，但这意味着您的工具提示将在过渡期间被剪掉。如果您在过渡期间禁用工具提示，它仍然可以为您工作（为此使用相同的 beforeLeave 和 afterLeave）。无论如何，当您的项目四处移动/褪色时，悬停工具提示通常看起来不太好。

<div ref="container">
  <transition-group name="fade" @before-leave="handleBeforeLeave" @after-leave="handleAfterLeave">
    ...
  </transition-group>
</div>

<script>
  export default {
    ...
    methods: {
      handleBeforeLeave(el) {
        const container = this.$refs.container
        // check if there was no overflow before the transition
        if (container.clientHeight === container.scrollHeight) {
          container.style.overflowY = "hidden"
        }
        if (container.clientWidth === container.scrollWidth) {
          container.style.overflowX = "hidden"
        }
      },

      handleAfterLeave(el) {
        delete this.$refs.container.style.overflowX
        delete this.$refs.container.style.overflowY
      }
    }
  }
</script>

【讨论】：