Vue transitions when shifting content

Question

I have run into a problem trying to transition content shifts. Essentially my data array is displayed in different parts of the DOM depending on state.

Basic concept:

OPEN

feedback 1 [ complete ]
feedback 2 [ complete ]
feedback 3 [ complete ]

CLOSED

What I try to achieve: When you press "close", feedback fades out from OPEN and fades in under the CLOSED section

This is what I tried: Rendering "Closed" items with a transition:

<transition name="fade">
  <v-row v-if="feedbackItem.state ==='closed'" v-for="feedbackItem in closedTasks" :key="feedbackItem.id">
    <p>
    {{ feedbackItem.feedback }}
    </p> 
    </v-row> 
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

But it does not work as needed (no visible transition), and elements under "Closed" are even hidden if there are multiple closed items. I think it has to do with the way the computed item lists are rendered. Possibly the line v-if="feedbackItem.state ==='closed'" causes a problem. Does anyone perhaps know how to best achieve the desired result or what am I doing wrong?

Codepen to play around with is here.

Thanks for anyone who spares a moment to think along!

tony19 · Accepted Answer · 2022-07-16 02:33:20Z

2

When doing loops you need to use transition group:

<transition-group name="fade" tag="div">
  <v-row v-if="feedbackItem.state ==='closed'" v-for="feedbackItem in closedTasks" :key="feedbackItem.id">
    <p>
      {{ feedbackItem.feedback }}
    </p> 
  </v-row> 
</transition-group>

You can read more here.

tag="div" is the element that will wrap the list of items.

And just a tip, using v-if and v-for together is a bad practice. You would be better to have a computed property which filters the items you want to loop.

edited Jul 16, 2022 at 2:33

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 11, 2020 at 11:08

thefallen

9,8202 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anzu Pai Over a year ago

Thanks for thinking along! If you check the code, I actually did use computed lists to filter out the items, v-ifwas there since many transitioning examples used that directive to trigger the effect. I followed your suggestion here and removed v-if too, but I can't still seem to get it to work. Am I doing something fundamentally wrong? codepen.io/anzuj/pen/bGdLqWZ

thefallen Over a year ago

@AnzuPai add display: block; to your .item class and add same <transition-group> tag to the top list. That worked when I tried it in the codepen. Let me know if you have some other questions.

Collectives™ on Stack Overflow

Vue transitions when shifting content

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related