Is there a way to automatically animate an element each time it moves to a different position on the screen?

I am working on a Vue project and facing an issue where elements disappear on the page due to the use of v-if, causing the rest of the page to rearrange abruptly. I am looking for a way to make these changes happen smoothly.

Each element on the page has a :key attribute assigned to it.

For example: I have two boxes centered in one row. When one box disappears, the remaining box is still centered, causing a position change. Here is an image for reference.

How can I address this issue effectively?

EDIT 1: I have attempted the following solution:

    <div>
        <CompoentA :key=345 class="one-line" v-show="showComponentA" />
        <transition name="moving">
            <CompoentB class="one-line" :key=123 />
        </transition>
    </div>
.one-line { display: inline-table; }
.moving-move { transition: transform 1s; }

Answer №1

v-if eliminates the element from the DOM, preventing the possibility of animating components that disappear.

To animate disappearing components, it is recommended to utilize v-show instead (which keeps them hidden in the DOM).

Answer №2

To create the animation, it is important to include both "from" and "to" values. When an element is removed from the DOM, the remaining elements are positioned inline, which can disrupt the transition if there is no reference value. There is a similar issue when trying to transition from height: 0 to height: auto.

Learn how to transition from height: 0; to height: auto; using CSS here.

I have created a sample solution using width (larger than the content) and setting the width to 0 with opacity 0 to hide the inner content. By clicking on the items in the sample, they appear to be "removed" (opacity:0 and width: 0) and the transition works because there is an initial width set (80px).

new Vue({
    el: "#app",
  data: () => ({
    // yes, there is better ways, but let make this sample "simple"
    letters: ['a', 'b', 'c', 'd'],
    visible: {
        a: true,
        b: true,
        c: true,
        d: true,
    }
  })
})
#app {
  /* decoration, you can remove */
  width: 100%; 
  text-align: center;
  background-color: #f4f4f4;
}

.moving {
  /* margin and padding 0 
     because the width content will be set to 0
     if this element has a margin, when removed the margin still display the "space"
  */
  padding: 0; 
  margin: 0;
  font-size: 0; /* remove white space in DOM element */
  display: inline-block;
  opacity: 1;
  transition: width linear .2s;
  
  /* decoration, you can remove */
  width: 80px; 
  border: 1px dotted #ccc;
  cursor: pointer;
}

.moving-content {
  font-size: 18px; /* restore font size */
  display: inline-block;
  
  /* decoration, you can remove */
  background-color: #2af; 
  color: white;
  padding: 20px;
  box-sizing: border-box;
}

.moving.hidden {
  width: 0px;
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="letter in letters"
        :key="letter"
        :class="{ moving: true, hidden: !visible[letter] }" @click="visible[letter] = false">
        <span class="moving-content">
          {{ letter }}
        </span>
    </div>
</div>

Additional Resources:

Check out this resource for more information: https://stackoverflow.com/a/40785144/1724128

Here is another helpful resource: https://stackoverflow.com/a/53127208/1724128

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Does the sliding transition between views function properly, even though the view appears on top of the header and behind the footer

My angular app is running smoothly, but now I want to add animations between views. When a user clicks on a link in the navbar, I want the view to slide to a different one. I was inspired by this example: Sliding between views. However, when I implemented ...

Is it possible to implement unplugin-vue-components in Quasar-CLI with the Vite version?

I previously utilized this package with the Vite plugin of Quasar, but now I need to transition to its Vite CLI. I attempted to follow the suggested steps like so: //quasar.conf.js vitePlugins: [ [ "unplugin-auto-import/vite", { ...

Animate elements with jQuery, moving them from the bottom right corner to the

I am currently working on a project to create a responsive webpage that involves clicking on a circle in the middle of the screen and having a div enlarge from the circle to the top left corner of the webpage. To achieve this effect, it seems like I would ...

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...

Tips for efficiently loading data into a vuex module only when it is required and addressing issues with async/await functionality

Is there a method to load all the data for a Vuex store once and only load it when necessary? I believe there is, but I am having trouble implementing it. I'm not sure if it's due to my misunderstanding of Vuex or Async/Await in Javascript promi ...

Whenever a POST request is received, Flask always replies with a status code of 400

During my work on a project using Vue.js with Flask, I encountered a bug related to POST requests. Flask consistently responds with a 400 error code for all requests. To replicate the issue, follow these steps: main.py import os from ...

laravel controller not receiving vuejs form data sent through api

Take a look at this VueJS code snippet: VueJS Code: data() { return { url: '/api/client/document/upload', } }, Computed Property: attachment() { return { slug: 'testing', test_type[enter image de ...

Disabling the scrollTop() effect following a click event with onClick()

Utilizing the scrollTop() event to toggle the visibility of a div at a specific position and also using the onClick() event to permanently hide the div. While the events are functioning properly, an issue arises when scrolling the page causing the div to r ...

vue Error: Attempting to access properties of an undefined object (specifically, 'NormalModule')

Working on a small web app written in vue, I utilize two different machines for testing and development. Github serves as a convenient platform for me to seamlessly switch between the two. Previously, I encountered no issues while working on my macos mach ...

Data is not displaying correctly in the Angular Material Table

I'm currently trying to build a mat table based on an online tutorial, but I'm facing a problem where the table appears empty even though I have hard coded data. As someone new to Angular and HTML/CSS, I'm struggling to understand why the ma ...

Tips for temporarily halting my animation using javascript

I'm working on animating a background image and I'd like to implement a pause feature within this function. Do you have any suggestions for the best practice to do this? function scrollBg(){ //Move to the next pixel row. current -= step; ...

What is the best way to modify the URL path to eliminate a specific parameter?

Recently, I integrated authentication into my Vue.js application utilizing Amazon AWS Cognito. Although the authentication is functioning properly, I am looking to tidy up the URL and so far have not been successful in doing so. Following authentication w ...

What is causing my vue.js table to not display properly?

Struggling to render a table using vue.js? You're not alone. Many developers face challenges when trying to use v-for to iterate through data and display it in a table format. It can be frustrating when everything seems fine in the console, but the ta ...

How to align CSS counters to the right within the ::before pseudo-element

Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...

Display a tooltip on v-autocomplete dropdown elements in Vuetify version 2.x

Seeking help with vuetify 2.x - I'm looking for a way to display tooltips for each item in the drop-down menu of v-autocomplete. The drop-down menu includes checkboxes and text fields. <v-autocomplete solo :items="..." v-model="sele ...

Change your Bootstrap 4 navbar to a two-row layout using Bootstrap 5

Looking to update the navbar from Bootstrap 4 to Bootstrap 5 with two rows I came across this code snippet that works well for me in Bootstrap 4: https://codepen.io/metismiao/pen/bQBoyw But now I've upgraded to Bootstrap 5 and need help converting it ...

The resizing issue persists with Angularjs charts

I have recently developed a small web application using AngularJS and I have implemented two charts from the AngularJS library - a bar chart and a pie chart. Although both charts are rendering correctly, they are not resizing properly as the display size c ...

Facing an issue where the Strapi image is not displaying on the _slug.vue page in my Nuxt

I'm having trouble displaying my Strapi images on the _slug.vue page. I've successfully displayed the title and content from Strapi, but when I include the image code, the page fails to render properly. <div class="article__container& ...

Is there a way to trigger a 'Are you sure you want to leave this page?' popup in a vue.js router?

I am currently developing a vue.js application and one of our requirements is to display a popup when the user tries to navigate away from a specific page. The popup should prompt the user with a message "Are you sure you want to leave the page?". I am awa ...

Trouble with Background Image Display in Internet Explorer 8

I have been attempting to set a background image for the . element, but it is not displaying correctly. The image shows up in Firefox and Chrome, but not in Internet Explorer. I have included a link to my website and relevant CSS code below. Can anyone pro ...