Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes?

    <div style="width: 100%; display: flex">
      <div id="firstColumn" style="flex-grow: 1"></div>
      <div id="secondColumn" style="flex-grow: 2"></div>
      <div id="thirdColumn" style="flex-grow: 1" v-if="showColumn"></div>
    </div>

I attempted to use vue transition for the third column (check out CodePen), but the animation doesn't behave as expected, causing the other two columns to abruptly snap into place. Is there a more elegant solution to achieve this effect?

cssvue.jscss-animationscss-transitions

Answer №1

Please take note that in the code snippet you provided, .slide-enter should be changed to .slide-enter-from for Vue3.

Understanding Flex Element Sizing

In your code, you are using transform: translate(100%,0) on the third element to shift it across the screen. However, when the flexbox calculates the size of each child element, it ignores any transformations and assumes the element is already in its final position, hence the sudden movement when clicking the button.

The size of flex children is determined by factors like flex-grow, flex-shrink, width, min-width, and max-width CSS properties.

Incorporating Column Size into Animation

To include the column's size in the animation, consider animating the flex-grow property from 0 to its actual size. This will cause other siblings to resize accordingly during the animation of the new column.

.slide-enter-active,
.slide-leave-active {
  transition: all 1s;
}

slide-enter-from,
.slide-leave-to {
  transform: translate(100%, 0);
  flex-grow:0 !important;
}

Example

Check out this CodePen example

You might want to consider removing the translate in the animation, depending on your desired visual effect.

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

In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

I have implemented a Bootstrap HTML section that consists of a container and two main rows. Here is the code snippet: <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style& ...

htmlcssbootstrap-4row

Having trouble with Laravel, Vue.js, and Pusher not communicating with a private channel on Heroku

I have a Laravel/Vue.js real-time application that works perfectly on my local environment. However, when I deploy it to Heroku, the response from /auth/broadcast is unusual. bootstrap.js window.axios.defaults.headers.common = { 'X-Requested-With& ...

laravelvue.jsauthenticationherokupusher

How can I retrieve a Vuex data property from another Vuex data property?

In order to make color variables easily accessible throughout my Vue app, I have stored them in an array named "colors[]" within the Vuex store. This method works well when accessing the colors within component methods or inline styles. Now, I am storing ...

vue.jsvuex

Having trouble accessing data in Laravel and Vue JS views

I'm currently working on displaying table data in a view using Vue.js and Laravel. Here is what I have attempted so far: This is the comment controller: public function index() { $comment = Comment::Latest()->paginate(10); return new Comm ...

javascriptlaravelvue.js

Unable to disable background color for droppable element

For my project, I am working with two div boxes. My goal is to make it so that when I drag and drop box002 into another div box001, the background color of box001 should change to none. I have attempted to achieve this functionality using jQuery without s ...

javascriptjqueryhtmlcss

When adding data to FormData(), it returns null

I am working with a data structure in Vue that looks like the following: data: { name: 'Lorem', status: 'Active', username: 'user-01', password: '12345' }, In order to send blob data (image) to the serv ...

vue.js

Mix up the colors randomly

After searching extensively, I have been unable to find exactly what I am looking for. The closest matches only cover a portion of my needs which include: I am seeking a randomly selected color scheme that I have created but not yet implemented in code. T ...

javascripthtmlcss

placing an empty gap within a visual depiction

My gallery lightbox displays images along with descriptions. However, the descriptions are all showing up in the same line with the same style and color. I want to separate each description on a new line to give some space. Here's an example of how th ...

jqueryhtmlcss

Arranging items in a vertical column using Bootstrap styling

I am facing a particular issue: The initial design is displayed in Picture 1: I am using Bootstrap 5 as my CSS framework. I attempted to utilize the pre-built columns feature, but so far, I have not been able to find a solution and am currently strugglin ...

cssbootstrap-5

Ways to dynamically apply a class to the interface according to the data condition in VueJS

User Interface : What triggers the addition of the Row-reverse class when the returned record index is an even number? ...

vue.jsvuejs2vuexvuejs3

Explain the concept of grid layout in CSS

Can you please clarify the distinctions between grid and liquid layouts? Specifically, I am interested in understanding the concept of a grid layout. Thank you in advance for your explanation. ...

css

Waiting for VueX to execute the mutation

Can VueX be used to create a method in the mounted() function that waits for a mutation in another component to be executed? Sometimes this mutation is triggered before and other times after, so I am curious if it's possible to await its execution af ...

vue.jsvuejs2vuexvuex-modules

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

javascriptjqueryhtmlcss

Vue-quill-editor causes lists to incorrectly display <br> tags when using Quill, resulting in unwanted formatting additions

My application relies on vue-quill-editor for users to create notes. Initially, when a user creates a list, it is saved correctly. For instance, the saved HTML may appear as follows: <div> Test: </div> <ol> <li> One </l ...

htmlvue.jsquill

Tips for concealing boostrap spinners

Within the main component, I have an @Input() alkatreszList$!: Observable<any[]>; that gets passed into the child component input as @Input() item: any; using the item object: <div class="container-fluid"> <div class="row ...

cssangulartypescriptbootstrap-5

The Android WebView display is consistently showing a blank white screen, failing to reflect CSS or HTML modifications, and exhibiting choppy animations

There seems to be a strange inconsistency when I make changes to CSS classes. Sometimes, after adding a down class name to a button using a touch event, the changes do not appear on the button or anywhere else on the page. It's frustrating how unpredi ...

androidhtmlcsscordova

Bootstrap version 5 has a feature where the dropdown menu extends beyond the right side of the screen

I'm facing an issue with the default bootstrap 5 navbar. When I attempt to add a dropdown on the right side, the list of dropdown items extends beyond the screen on the right. You can see the problem here. I've tried the solutions suggested in s ...

htmlcssbootstrap-4bootstrap-5

PhpStorm struggles to interpret custom tags accurately

Unexpectedly, PhpStorm seems to be struggling with recognizing custom tags, leading to incorrect code formatting. Currently working on a .vue file, here is a brief example of how the code should appear: <template> <auth-layout> &l ...

vue.jsphpstorm

Generate three separate inline blocks and position elements within them without any impact on the neighboring blocks

In my attempt to create three blocks with set height and width, aligned on top/bottom with a couple of elements inside each one, I encountered an issue. Whenever I add additional DIVs to one of the elements (resulting in a different number of DIVs inside e ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for creating an animated effect on the active tab when it switches

Currently, I have a tab list containing li items. When an item is active, the li item has rounded corners and a box shadow effect. My goal is to add an animation that shows the active pill moving to its next position when it changes, but I am unsure of how ...

htmlcssreactjs