CSS transition simultaneous

Question

Hi have a menu that opens on :hover.
When I hover to the next element it waits a bit.
I would like that both transitions are at same time making a accordion effect.

What am I missing?

Fiddle

css

ul {
    border:2px solid #aaf;
    overflow:hidden;
}
li {
    max-height:0px;
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    transition: max-height 1s;
}
ul:hover li {
    max-height:500px;
}

html

<ul class="menu">Alpha
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul class="menu">Beta
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul class="menu">Gamma
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

@Danko, I would. But my menus can be very long, that's why the max-height. Thanks. — Sergio, Nov 29 '13 at 20:51
Each li can be very long??? or the total ul? beacuse you're setting lis not ul — DaniP, Nov 29 '13 at 20:52
@Danko, aha... good catch! I was thinking the css selector was applied on the ul... thanks. — Sergio, Nov 29 '13 at 20:53
@Danko, I still wonder why does max-height transition start from `500px` and not the real/rendered height... — Sergio, Nov 29 '13 at 20:58
Because max-height are not related to fit the actual height acts just like a limit ... then you were descending from that value no matters what was the real height — DaniP, Nov 29 '13 at 21:00

vals · Accepted Answer · 2018-11-20T15:21:29.330

There is no time delay, both are happening at the same time.

There problem is that you are doing the change on max-height, and besides that, to a huge value.

So, the transition when it is growing is very fast (because the pixels / second are high), but instant.

The shrinking transition begins inmediatly, but is invisible in the 500px - 16px interval (or to whatever is your real height), then happens fast, but (aparently) delayed.

You can:

a) transition the height and not the max-heght

b) set a max-height more close to the higher height that you expect

The a posibility has the problem that you lose flexibility. Your li's can no longer have the height that is calculated from their properties, but the one that you fix. This, however, can be done somewhat better using ems, like height: 1.2em; or so.

And, about what is happening with the max-height transition. Lets say that the hover state is set to max-height: 100px; The height is 18.9 px in my browser. (and you don't expect that to be modified by max-height.

Now, let's say that you are going to max-height: 0px in 1 second. The transition is calculated based on these values (and nothing else!). This gives that at 0.5 s, half the transition has gone thru, and max-height is 50px. The height is naturally still 18.9 px.

When 0.7 s have gone thru, the max-height is 30px, and the height is stll 18.9 px.

There is no feedback from the height to the max-height that can be used to modify somehow the initial and final values of max-height.

Smaller max-height like `max-height:50px` still has the same problem. **http://jsfiddle.net/jSBf3/9/**. The idea of `max-height` **[is because of this](http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto)** — Sergio, Nov 29 '13 at 20:46
Looks like the same problem, but the delay is shorter ... max-height:20px, almost good: http://jsfiddle.net/vals/jSBf3/16/ — vals, Nov 29 '13 at 20:49
vals, my bad. I was applying the `:hover` selector to the `li`. Then its no problem to use a smaller max-height... thanks for looking at this. **I still wonder** why does max-height transition start from `500px` and not the real/rendered height... — Sergio, Nov 29 '13 at 20:54
Just because you are transitioning max-height, and max-height IS 500px. The real height is lower, but is, well, height, not max-height. — vals, Nov 29 '13 at 21:22
Should the transition not take the actual value in mind instead of the maximum? — Sergio, Nov 29 '13 at 22:13

CSS transition simultaneous

Fiddle

1 Answers1

Linked