CSS Transition Delay Issue

[wealthpossible]

Hi all,

I have an accordion menu on a site I am working on. I have used transitions to create the menu.

When I click to open a section of the menu, it opens smoothly. When I click another section it also opens smoothly, however the previous section does not close immediately. It closes about 3 to 5 seconds after the second section has been opened.

What could be the problem? I have stripped back the CSS to the following:

@charset “utf-8”;
/* CSS Document */

.accordion {
width:900px;
overflow:hidden;
margin:0px;
color:#901728;
background:#901728;
padding:10px;
padding-top: 7px;
}
.accordion section{
float:left;
overflow:hidden;
color:#000;
cursor:pointer;
background: #fff;
margin-top:3px;
width: 100%;
}
.horizontal section{
max-height:40px;
transition: max-height 3s ease-in-out 0s;
}
.horizontal :target{
max-height:9999px;
transition: max-height 3s ease-in-out 0s;
}

The website: http://www.morrocanoilinfo.com/treatments/

Thanks for reading.

[TheDoc]

Very odd.

For starters, your transition *should* be taking three seconds since that’s what you’ve told it to do. It’s going much quicker than that, however.

I’ve created an example here using `height` and it seems to be working fine: http://codepen.io/ggilmore/pen/875fabd075831c74c2b6b3e6e5573b37

Aaaahhhhh. I think I’ve figured it out. It’s transitioning 3 seconds all the way to 9999px. If you changed that value to, say, 200px you’d see that the animations are in fact happening at the same time. I think you might just have to find another way to go about this.

[wealthpossible]

Ah, thank you Doc!

My original issue was that I was trying to figure out how to transition from a fixed height to a height of “auto”. Using a max-height of 9999px was a work around I found online somewhere, but as you can see it is now causing this timing issue.

Back to the original issue I go!

[Author]

Posts