Shifting content results in Vue transitions

Question

Shifting content results in Vue transitions

I've encountered an issue with transitioning content shifts. My data array is displayed in different areas of the DOM based on the state.

The main idea:

OPEN

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

CLOSED

Goal: When "close" is clicked, feedback should fade out from OPEN and appear under the CLOSED section.

What I attempted: Rendering "Closed" items with a transition effect:

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

However, the desired result is not achieved (no visible transition), and elements under "Closed" are hidden if there are multiple closed items. It seems related to how the computed item lists are rendered. The line

v-if="feedbackItem.state ==='closed'"

might be causing the problem. Any suggestions on how to achieve the desired outcome or what could be done differently?

Codepen link for experimentation: here.

Thank you to anyone taking a moment to help figure this out!

javascript vue.js css-transitions transition

Answer 1

Answer №1

To efficiently create loops, ensure you incorporate the 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>

For more information, visit here.

The tag="div" is utilized as the element to enclose the item list.

Furthermore, it's recommended to avoid combining v-if and v-for as this practice can be less efficient. Instead, creating a computed property to filter the desired items for looping is advisable.

Answer 2

To efficiently create loops, ensure you incorporate the 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>

For more information, visit here.

The tag="div" is utilized as the element to enclose the item list.

Furthermore, it's recommended to avoid combining v-if and v-for as this practice can be less efficient. Instead, creating a computed property to filter the desired items for looping is advisable.

Shifting content results in Vue transitions

Answer №1

Similar questions

Dropping anchor whilst skipping or jumping

How can I resolve the Vue warning about an unknown custom element <password-input>?

HTML Settings Menu: Customize Your Preferences

The div element is not adjusting its size according to the content it

What is the best approach to retrieve a JSON object from a form exception that has a specific name?

The usage of the "this" keyword in a function call is not

A guide on implementing a jQuery click function on ng-click in an AngularJS application

React Native not refreshing state data

I am currently facing an issue with my Next JS app where the search results page is not showing up when a user enters a query

A guide on Implementing PastBack Functionality with AJAX Responses

I am encountering an issue with Quasar Dev not functioning properly when running the "quasar dev"

Conceal the elements of Widget Style by using jQuery to target the ul

Leveraging functions in a Node.js module

What is the method for accessing the Redux store content directly in the console, without using any developer tools

What is the best way to incorporate products as components into the cart component?

Click the button to reset all selected options

Ways to retrieve the pending count of XMLHttpRequests in JavaScript

Tips for setting a default checked radio button in Vuejs

Is there a glitch with child margins in a relative-absolute positioning setup?

Capturing HTTP requests using JavaScript