Creating a smooth transition for an element's width change as a neighboring element shows or hides using v-show

Question

Creating a smooth transition for an element's width change as a neighboring element shows or hides using v-show

I'm working on a Vue.js application with tailwind styling. Within a flex parent container in my template, I have two child elements - one is always present, and the other is conditionally rendered using v-show.

The issue arises when the conditional element appears, causing the width of the first element to adjust automatically to accommodate the new space within the flex container. While this behavior is expected, I am looking to enhance it by adding a smooth animation to the width change of the first element, such as a sliding effect.

Here's a simplified version of my template structure:

<div>
  <div
    v-for="(group, groupName, index) in groups"
    :key="groupName"
    class="flex flex-row mb-2 relative"
  >
    <Transition
      mode="in-out"
      enter-from-class="-translate-x-[150%] opacity-0"
      leave-to-class="-translate-x-[150%] opacity-0"
      enter-active-class="transition duration-200"
      leave-active-class="transition duration-200"
    >
      <div class="join join-vertical" v-show="buttonsVisibility[groupName]">
        <!-- Conditionally rendered element -->
      </div>
    </Transition>

    <div class="shadow-md rounded-lg collapse">
      <!-- The element I would like to animate when the other element is shown/hidden -->
    </div>
  </div>
</div>

Current behavior:

https://i.sstatic.net/y3uqsV0w.gif

I'm seeking advice on how to achieve an animated transition effect for the specific element. Any help or suggestions would be highly appreciated!

I've attempted to use Vue's "Transition" component and Tailwind's transition properties for the dynamically changing width element without success.

css vue.js vuejs3 tailwind-css

Answer 1

Answer №1

This code provides a practical solution for creating an animation on a flexbox element.

<script setup>
import { ref } from 'vue'

const shown = ref(true)
</script>

<template>
  <nav class="flex">
    <div class="first" :class="shown && 'open'">first block</div>
    <div class="second" @click="shown = !shown">second block that we do not really care about</div>
  </nav>
</template>

<style>
.flex {
  display: flex;
  height: 50px;
}
.second {
  background-color: #e9edc9;
  flex: 12 0; /* set to 1 0 if you want to have an even width for the elements */
}

.first {
  background-color: #caf0f8;
  width: 0; /* this is important for the element to shrink */
  display: hidden; /* this replaces the v-show in a better way */
  transition: all 250ms ease-in-out;
}

.open {
  background-color: #90e0ef;
  flex: 1 0; /* where the transition happens */
}
</style>

Check out this interactive playground to experiment with the code. It's straightforward and can be easily translated into Tailwind CSS.

Let's break down what's happening in the code:

The use of v-show typically adds display: none; to an element, which can complicate transitions due to CSS limitations. Instead, using display: hidden; achieves the same visual effect while allowing for smoother transitions.
In this example, a simple
```
@click="shown = !shown"
```
event handler is used, but alternatives like @mouseenter or @mouseleave could also work depending on the desired behavior.
The flex: 12 0; property creates a small width on one side by enlarging the parent container twelve times its normal size.
Avoiding unnecessary transforms in favor of leveraging flexbox properties ensures an efficient layout approach. Check out this comprehensive guide to Flexbox for more information.
In this scenario, using a <transition> component isn't necessary as the width distribution is handled effectively through flexbox properties, making it easy to translate to Tailwind CSS.
The
```
:class="shown && 'open'"
```
syntax applies the .open class to the element when shown is truthy.

Answer 2

This code provides a practical solution for creating an animation on a flexbox element.

<script setup>
import { ref } from 'vue'

const shown = ref(true)
</script>

<template>
  <nav class="flex">
    <div class="first" :class="shown && 'open'">first block</div>
    <div class="second" @click="shown = !shown">second block that we do not really care about</div>
  </nav>
</template>

<style>
.flex {
  display: flex;
  height: 50px;
}
.second {
  background-color: #e9edc9;
  flex: 12 0; /* set to 1 0 if you want to have an even width for the elements */
}

.first {
  background-color: #caf0f8;
  width: 0; /* this is important for the element to shrink */
  display: hidden; /* this replaces the v-show in a better way */
  transition: all 250ms ease-in-out;
}

.open {
  background-color: #90e0ef;
  flex: 1 0; /* where the transition happens */
}
</style>

Check out this interactive playground to experiment with the code. It's straightforward and can be easily translated into Tailwind CSS.

Let's break down what's happening in the code:

The use of v-show typically adds display: none; to an element, which can complicate transitions due to CSS limitations. Instead, using display: hidden; achieves the same visual effect while allowing for smoother transitions.
In this example, a simple
```
@click="shown = !shown"
```
event handler is used, but alternatives like @mouseenter or @mouseleave could also work depending on the desired behavior.
The flex: 12 0; property creates a small width on one side by enlarging the parent container twelve times its normal size.
Avoiding unnecessary transforms in favor of leveraging flexbox properties ensures an efficient layout approach. Check out this comprehensive guide to Flexbox for more information.
In this scenario, using a <transition> component isn't necessary as the width distribution is handled effectively through flexbox properties, making it easy to translate to Tailwind CSS.
The
```
:class="shown && 'open'"
```
syntax applies the .open class to the element when shown is truthy.

Creating a smooth transition for an element's width change as a neighboring element shows or hides using v-show

Answer №1

Similar questions

Troubleshooting issues with Vue.js page routing

Has there been a recent update to Tailwind CSS' sizing rules?

Secure the API with CORS to prevent unauthorized access from different frontends, such as Postman, when making

Sticky CSS - A guide to making aside elements fill the entire available height

What is the best way to simultaneously check two conditions in Vue.js?

The jQuery DataTable with footer is lacking responsiveness

The slider thumb on materialized CSS HTML5 Range is not visible

Shifting the placement of a component in Vue JS when hovering the mouse

Open a new HTML page with jQuery with a click event trigger on an iframe element

I am looking to host several iterations of jQuery on a content delivery network within my Nuxt application

Tips for achieving a scrollable table in the shadcn/ui framework?

Is there a way to get rid of those pesky red lines that appear when declaring variables in a .scss file in VS

Python Selenium tutorial: Navigating inner scrollbars on websites

The desired hover effect on the navigation bar is not functioning properly

Combining different HTML table borders

v-tooltip specifically designed for the append-icon

Is there a way to eliminate the "x" in the upper right corner of a Foundation Joyride?

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

Image alignment

Issue with Vue.js component not properly retrieving value from variable