Issue with the ScaleY transformation function not functioning as intended

Seeking help with a React component that should toggle visibility when the wrapping parent div is clicked. I want to include animations for both appearing and disappearing, but currently only the appearance animation is working. Can anyone spot what I'm doing wrong? Thanks!

React component

import React from 'react';
import classNames from 'classnames/bind';
import styles from './styles.css';

const cx = classNames.bind(styles);

export default function toggleableElement({ isOpen, content }) {
    const animatedAnswerStyle = cx({
        animatedAnswer: true,
        opened: isOpen,
        closed: !isOpen,
    });
    return (
        <div className={animatedAnswerStyle}>
            {
                isOpen &&
                 <p> { content } </p>
            }
        </div>
    );
}

Style

.animatedAnswer {
    transform: scaleY(0);
}

.opened {
    transform: scaleY(1);
    tranform-origin: top;
    transition: transform 2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.closed {
    transform: scaleY(0);
    tranform-origin: top;
    transition: transform 2s cubic-bezier(0.4, 0.0, 0.2, 1);    
}

Answer №1

Success!

.animatedResponse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.expanded {
  max-height: 800px; // an extensive size
}

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

The dependency tree could not be resolved due to an ERESOLVE error in npm

After cloning this project from a repository with the command git clone, I navigated to the correct directory. For example: However, when I tried to install the project, I encountered an error. Here is an image of the error message: enter image descripti ...

Connection to external sources has been deactivated

I am experiencing an issue on my website at . When attempting to click on a link, it seems to be disabled. I suspect this is due to the presence of two images at the end of the navigation bar. Removing these images causes the navigation bar to fall apart, ...

Struggling to close the dropdown with jquery

Check out this code snippet: https://jsfiddle.net/rajat_bansal/rtapaew5/1/ The jQuery section below is causing some trouble: $(document).ready(function(e) { $(".sub-handle").click(function() { if(!$(this).hasClass('showing-sub&ap ...

Implementing context menus on the Material-UI DataGrid is a straightforward process that can enhance the user experience

I am looking to enhance my context menus to be more like what is demonstrated here: Currently, I have only been able to achieve something similar to this example: https://codesandbox.io/s/xenodochial-snow-pz1fr?file=/src/DataGridTest.tsx The contextmenu ...

What is the best method for transferring images to a node.js server using Axios?

Is there a method to utilize axios for sending an array of images or a single image to node? My current axios code (implemented in react js on the frontend): onFormSubmit(event){ event.preventDefault(); let payload = this.state; console.log(" ...

Issue with copying files during deployment in Firebase using NextJS

I'm currently utilizing Firebase for deploying my application built with NextJS to Firebase Hosting. However, I've encountered an error that seems to be linked to the attempt to copy a file that doesn't exist from the .next directory to the ...

What could be causing my jQuery script to not load properly on the first attempt?

I have a jQuery script set up on this particular webpage just before the ending body tag. Here is the script: <script> $(document).ready(function(){ var demomain = $(".demo-bg section"); var demomainW = demomain.height()+ 150 ...

Image background within the textarea of Contact Form 7

Struggling to insert a background image inside a textarea on a contact form. The issue arises when the browser window is resized, cutting off the image and failing to fit perfectly within the textarea. I want the textarea to fully display the image and adj ...

What steps do I need to take to successfully deploy my NextJS website on Winhost with IISnode compatibility?

After creating a website using NextJS with features like ISR and API Routes, I found that the hosting service I chose, Winhost, is not optimized for NextJS and only supports IISnode. Is there a way to host my NextJS website without static exporting while ...

Using the Carousel component from Bootstrap 5.1v exclusively within a React application

Utilizing bootstrap in create-react-app alone does not allow for navigation to the next and previous slide. The bootstrap class is being used alongside HTML. P.S : This is without react-bootstrap. Carousel.js export default function Carousel() { return ...

When experimenting with React JS, I attempted to trigger a modal to open upon clicking a card but unfortunately, the modal did not appear as expected

I'm currently facing an issue where I want to open a modal when clicking on a card. My setup involves using a button with a card component nested underneath it. import React from 'react'; import ReactDOM from 'react-dom'; import & ...

Troubles with Bootstrap's navbar dropdown menu functionality

I seem to be encountering a problem with the dropdown list in my navigation bar. It was functioning correctly yesterday, but something seems to have gone awry as Bootstrap is no longer working for the dropdowns only. I'm puzzled as to why this sudden ...

Having trouble locating the module 'monaco-editor/esm/vs/editor/editor.worker' while using create react app

I am currently facing some challenges running react-monaco-editor in my project despite following the documentation and making necessary adjustments to my files. Below is a snippet of my package.json file: { "name": "chatbot_compiler", "version": "0. ...

Enable automatic indentation for wrapped text

I'm still learning the ropes here, but I'm looking to have text automatically indent when it's wrapped. Instead of this: Peter piper picked a peck of pickled peppers. It should look like this: Peter piper picked a peck of pickled pepp ...

What is the best way to resize a div located below a dynamic div in order to occupy the available space?

My website has a dynamic div1 and a scrollable table inside div2. I need the div2 to take up the remaining height of the window, while ensuring all divs remain responsive. I've tried using JavaScript to calculate and adjust the heights on window loa ...

The submit button appears as grey on IOS when using the input[type="submit"]

Why does the submit input look different on IOS only, and how can this be resolved? https://i.sstatic.net/UVlKB.png Thank you in advance For HTML: <input class="btn" type="submit" [disabled]="" ...

The background image constantly shifts while scrolling on a mobile device

Just sharing my first post here. There's been something bothering me on my personal website for quite some time. Whenever I visit the site on my Android phone and start scrolling through the page, the background image seems to 'adjust' itse ...

Endlessly scrolling text using CSS

Is it possible to create a continuous rolling text effect on an HTML page without any gaps, similar to a ticker tape display? For example, displaying "Hello World ... Hello World ... Hello World ... Hello World ..." continuously. I attempted using the CSS ...

React's Bootstrap Modal Failing to Close

Check out the following modal component. The issue seems to be with the code block where (isPending == "hide") triggers a console.log, but bsModal.hide() doesn't function as expected. If I remove the bsModal.show() line of code, the modal ...

Utilizing jQuery or Javascript to obtain the title of the current webpage, find a specific string within it, and then apply a class to the corresponding element

Let's imagine I start with this: <title>Banana</title> and also have some navigation set up like this: <ul id="navigation"> <li> <a href=#">Banana</a> </li> </ul> Upon loading the sit ...