Is the CSS Transition Solely Active for the Introductory Animation?

I'm currently looking to enhance the smoothness of div expansion and contraction on hover using CSS transitions. However, I have noticed that the Transition property only seems to affect the entry animation (i.e., when the mouse hovers and the div expands) but not the exit (when the mouse leaves and the div collapses). Is there a different property or something else I should be incorporating to ensure this animation is consistent?

.collapsed-content {
  max-height: 3rem;
  transition: max-height 1.75s ease-in;
  display: flex;
  flex-direction: column;
}

.collapsed-content :hover {
  max-height: 300rem;
  transition: max-height 1.75s ease-in;
}
<div className='collapsed-content'>
  <p> Content </p>
  <div>
    <p> More content to reveal here </p>
  </div>
</div>

Answer №1

Do you like this approach inspired by this thread?

.collapsed-content {
  overflow: hidden;
  max-height: 3rem;
  transition: max-height 1s cubic-bezier(0, 1, 0, 1);
  background: tomato;
  padding: 0 1rem;
}

.collapsed-content:hover {
  max-height: 300rem;
  transition: max-height 2s ease-in-out;
}
<div class="collapsed-content" >
  <p> Content </p>
  <div>
    <p> More content to reveal here </p>
  </div>
</div>

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

Events in the backbone view fail to trigger after a re-render

For some reason, I am struggling to get mouse events to work on my backbone view after it is re-rendered. It seems like the only solution is to use a rather convoluted jQuery statement: $("a").die().unbind().live("mousedown",this.switchtabs); I initially ...

The specified JSX element does no possess any constructors or callable signatures

The root element on the right side of my page is a simple React element that I am currently using. Can you help me troubleshoot and fix the error that is being displayed? https://i.sstatic.net/xdDyn.png ...

Dealing with API Troubles: Resolving 'AxiosError: Request failed with status code 401' Issue in ReactJS

I encountered the following error: AxiosError: Request failed with status code 401 While attempting to log in to my react app, I researched similar solutions and discovered that some answers suggested the issue could be related to missing headers in Axi ...

Issues with displaying video content and controlling the Bootstrap 5 video carousel

I have encountered an issue while coding a website for a friend's company. He requested a video carousel to be added to his existing site, so I incorporated links and scripts for Bootstrap in order to create a gallery for his products and a carousel t ...

How can I fix the issue of clearInterval not functioning properly in an Electron JS application?

The clearInterval function is not working properly in this code. What can be done to fix this issue? var inter; ipcMain.on("start-stop",(err,data)=>{ console.log(data.data) function start(){ inter = setInterval(fu ...

Here is a method to transform the JSON object into a string as demonstrated below:

Presented below is a JSON object: { "category": "music", "location": { "city": "Braga" }, "date": { "start": { "$gte": "2017-05-01T18:30:00.000Z" }, "end": { "$lt": "2017-05-12T18:30:00.000Z" } } } I am looking t ...

The menu shifts position or overlaps next to the current active menu option

It would be helpful to take a look at the URL provided (http://ymm.valse.com.my/) in order to understand my question better. Upon clicking on any menu item, I noticed that the menu next to the active tab overlaps. I believe the issue lies in the width pro ...

Update the navigation logo while scrolling

My website has a scrolling navigation menu using Wordpress. The default logo color is green, but when the user scrolls, a white background appears. However, on specific screens, I need the initial logo to be white. I have managed to create an alternate na ...

Include a "remember me" feature in the Stripe form

I am currently working on an exciting project using Angular 6. Within my website, I have decided to integrate the Stripe payment system. However, I would like to incorporate a unique and default "remember me" feature offered by Stripe. <div id="card-e ...

Ensure every individual input field in a Bootstrap form is validated using JavaScript before submitting the form

As a newcomer to Javascript, I am seeking assistance with validating each field in the form below without having to click on the submit button. Your help is greatly appreciated! <form action="" id = "form1" class = "form-group row"> & ...

What is the best way to customize the appearance of a table using CSS?

I'm attempting to create a table through RAILS that is automatically generated in the default layout. However, I want to customize its appearance using CSS to achieve the desired look. Specifically speaking, from the attached image, I would like the ...

Finding all items in an array in Cypress and validating them using JavaScript assertions

After making an API call, I have received an array response that includes the following information: [ { "IsDatalakeEnabled": true, "RecoveryHr": { "IsRecoveryHREnabled": false, &quo ...

Avoid reloading the header component along with its APIs when navigating routes in React JS

I'm currently working on a web application using react js/next js and within it, I have various pages that make use of globally shared components like the Header and Footer. However, I am facing an issue where I want to prevent unnecessary re-renders ...

Save and retrieve documents within an electron application

Currently, I am developing an application that will need to download image files (jpg/png) from the web via API during its initial run. These files will then be stored locally so that users can access them without requiring an internet connection in the fu ...

Tips for declaring the project npm registry within the package.json configuration file

Currently, I am juggling multiple projects simultaneously and facing the issue of each project having a different node module registry. For instance, project A sources its modules from http://registroy.foo.com, while project B pulls modules from http://re ...

I'm having trouble with my AJAX Update Panel. Can someone please help me figure out what I'm doing wrong?

--------------Handling Gridviews DataBound Event ----------------- protected void grdShowCallingList_DataBound(object sender, EventArgs e) { if (grdShowCallingList.Rows.Count > 0) { foreach (GridViewRow row in grdShowCallingList.Rows) ...

Is it possible to utilize Bootstrap Icons as bullet points on a website?

Is it possible to use Bootstrap icons for bullet points with CSS? I am aware that FontAwesome can be used for this purpose, but I would like to confirm if the same can be achieved using Bootstrap. Though there is a method using: <ul> <li>< ...

I am struggling to make my Bootstrap 5 Navbar transparent. Can anyone help me figure this out?

I've been struggling with my Bootstrap Navbar, which appears as white no matter what I do. I've tried numerous solutions from Stack Overflow to make it transparent without any luck. Even after setting the background to transparent and ensuring t ...

Managing user input in Node.js

Users are required to input a URL in the form (e.g: "") and I need to be able to access and read the content from that URL. I am uncertain about my current method. What should I enter in the URL field below? var options = { url: '....', ...

Utilize JQuery to identify and select every parent element, then retrieve the height of the first child element and adjust the height of the

Recently, I developed a PHP script that pulls news and case posts from a database. The HTML structure used for displaying these posts is as follows: <a href='/post/placeholder'> <div class='col nopadding col12-12 counter'> ...