Vue Transition Group issue: last item of v-for object overflows out of container when transitioning

Question

As you can see from the code below, I am trying to apply a group transition on the object feedbacksToShow.

All works well unless I try transitioning the last item of the list, which overflows out of the #feedback-list div container.

I can't make use of overflow-hidden on the containing div, as I'm using tooltips which would overflow from the container when a feedback item is hovered (this part of the code is not shown here as trivial).

I've looked for an answer everywhere before posting with no success.

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

Any kind of guidance would be much appreciated

Answer 1

I faced a similar problem, where removing an item from the transition group pushed all the items down, causing temporary overflowing and the scrollbar to appear and disappear. I still wanted my container to be scrollable when the content was actually bigger than the container, so a overflow: hidden is no good for me either. This annoying behaviour can be repeated in the examples in the Vue documentation too.

The work around I used was to check if the container had overflowing before the transition. If there was no overflow, prevent overflow for the duration of the transition. This worked perfectly for my situation, but it will mean your tooltips will be clipped during the transition. It could still work for you if you disable the tooltips during the transition (use the same beforeLeave and afterLeave for this). Hover tooltips generally don't look so great while your items are shifting around/fading anyway.

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