The smooth transition of my collapsible item is compromised when closing, causing the bottom border to abruptly jump to the top

Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. Instead, it abruptly goes to the top, creating a glitchy effect. The styled components used are as follows:

const CollapsableContent = styled.div`
text-align: center;
font-size: 1.2rem;
opacity: ${props => (props.open ? "1" : "0")};
max-height: ${props => (props.open ? "100%" : "0")};
padding: ${props => (props.open ? "15px" : "0 15px")};
overflow: hidden;
transition: all 0.3s ease-out;

`

For a more detailed code explanation and demonstration, check out the codesandbox link. Feel free to click anywhere on the text in the sandbox environment.

javascriptcssreactjssassstyled-components

Answer №1

In order for animation to function properly, it is essential to define two valid values within a specified range. Simply setting the value to 100% may not work unless the containing div has a known height. Essentially, by using 100%, you are indicating to the browser that the div will occupy 100% of something undefined. To address this issue, consider nesting the div inside another container with a defined height or utilize a property such as:

max-height: ${props => (props.open ? "1000px" : "0px")};

Since we are setting max-height and not height, there will be no additional space taken up.

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

How to use jQuery Animate to create a step-by-step animation with image sprites?

I'm working on creating an image sprite using jQuery and I'm curious if it's feasible to animate it in steps rather than a linear motion. I initially tried using CSS3 animations, but since IE9 is a requirement, the animations didn't wor ...

javascriptjqueryhtmlcssjquery-animate

Creating tilted divs with dynamic height to perfectly fit the content

I'm struggling to incorporate this design into my webpage; I can't seem to get the right div's height to match the left div as depicted in the second image. Can someone offer some assistance? Additionally, when viewed on mobile, the squares ...

htmlcssbootstrap-4

Harness the power of Ionic by utilizing the same HTML template across various pages, while easily customizing the content

I need help with streamlining my Ionic app that has multiple pages with similar HTML structures but different content. Is there a way to use just one HTML file and dynamically fill in the content? Should I use a controller for each page, or is there a more ...

javascripthtmlangularjsionic-framework

Filtering Completed: Table Returned

Recently, I worked on a fun project where I organized JSON wine data into a table and created an object that defines various wines along with their attributes like color, taste, and body. The main objective: When clicking the red button, I want a function ...

javascripthtmlreactjsjsx

Convert JavaScript object into distinct identifier

I have a data object where I'm storing various page settings, structured like this: var filters={ "brands":["brand1","brand2","brand3"], "family":"reds", "palettes":["palette1","palette2","palette3"], "color":"a1b2" }; This object is ...

javascriptjqueryjavascript-objects

Changing the image's flex-grow property will take precedence over the flex settings of other child

This is the error code I am encountering, where "text1" seems to be overridden <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="view ...

javascripthtmlcss

Protecting a javascript string in php: A comprehensive guide

Having trouble with my PHP javascript string. Attempted to add a string to a variable within a switch statement but encountered an error: $blocPub = '<script type="text/javascript"> var rdads=new String(Math.random()).substring (2, 11 ...

javascriptphpjqueryphp-5.3

Tips on how to efficiently update or insert an object within an array in Vue JS 2

My current item list is displayed below. I am looking to add new items to the list, but if the ID matches an existing entry, I want to update the value of that object. For example: segmentValues: [ { id:1, value:'Foo' }, ...

javascriptarraysvue.jsvuejs2

Leveraging JSON data in a client-side JavaScript script

Recently, I started exploring node.js and express. One issue that I am currently facing is how to correctly retrieve json data in a client-side javascript file. I keep receiving a 404 error indicating that the .json file cannot be found. In my project&apo ...

javascriptjqueryjsonnode.jsexpress

Rerendering of a React component occurs upon a change in its state

Previously, my form was functioning flawlessly. However, after making a few modifications to the state variables, the input field now loses focus upon a state change. I am utilizing MUI and everything was working perfectly until this sudden issue arose f ...

javascriptreactjsmaterial-ui

Step-by-step guide on retrieving news_id and displaying it in an alert when an item

How can I retrieve the item ID when it is clicked in a Listview to display the specific news_id in an alert? Below is the HTML code snippet for my page: <body> <div data-role="page" id="taxmanhomepage" data-theme="e"> <div data-role="h ...

javascripthtmljson

Strategies for managing common dependencies while distributing components across various applications within a monorepo

In my monorepo, the structure is as follows: root --AppOne ----package.json ----node_modules ------styled-components --AppTwo ----package.json ----node_modules ------styled-components --Shared ----componentA ----package.json ----node_modules ------style ...

npmwebpacknode-moduleswebpack-4styled-components

Using values from a designated line within the textarea to successfully submit a GET form

How can I extract values from a specific line in a TextArea and use them to submit a form? <!DOCTYPE html> <html> <body> <input type='button' value='submit' onclick='document.getElementById("submit-line-3") . ...

javascriptjqueryhtmlajax

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

htmlwordpresscss

Issues arose when attempting to delete the values passed in the context provider using the 'useContext' hook

Try this code in your sandbox: https://codesandbox.io/s/goofy-dhawan-n2kk2?file=/src/components/NavBar.jsx An error occurred: TypeError: Cannot destructure property 'books' of 'Object(...)(...)' as it is undefined. ...

reactjsreact-hooksuse-context

What is the best way to securely transfer data from a Node/Express server to the client using JavaScript, ensuring sanitized HTML and preventing cross-site scripting (X

What is the best method to securely pass data from an Express backend to a client-side JavaScript in order to render it in the DOM using client-side rendering, while also allowing sanitized whitelist HTML and preventing XSS attacks? For example, if the No ...

javascripthtmlexpressxsshtml-sanitizing

Nextjs has the ability to trigger a full page rerender once the entire page has finished

Working on a Next.js 14 application that utilizes Server-Side Rendering (SSR) to generate the complete HTML for the browser, I've come across an issue. After the page fully loads in the browser, Next.js triggers a re-render which briefly displays the ...

reactjsnext.js

Switch the dropdown menu to a button if it consists of only one option

I have been using a database within the Moodle Learning Management System that generates a bootstrap table. Here is an example of what it looks like: The last row in the table contains a dropdown menu. When viewing your own entry, you have the options to ...

javascripthtmlcsstwitter-bootstrap

converting an angular object into a string representation

I stumbled upon this guide: . and it includes the following piece of code: import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl ...

javascriptangular

Sort the parent by the number present in the child item using jQuery

Is there a way to rearrange a list of items based on a specific number within each item? Consider the following HTML structure that cannot be modified: <ul id="ul-list"> <li> <div class="name">product 1</div> & ...

javascriptjqueryhtml