CSS3 Transition solution of Auto Value

Today, when preparing tomorrow's classroom case, I encountered the Auto value Transition Bug. After searching for various solutions, I found the following.

Problem description

When we need to set the Transition (Transition) for the width and height values, if our start State (or end state) is auto, the Transition will become invalid.

For example, in this case, the number of level-2 menus is not fixed, so ul. the sub height is not fixed. We need to assign the auto value to it (based on the Content height to determine its height). At this time, the Transition (Transition) will not work.

Ul. menu li. sub {height: 0; overflow: hidden; transition: all 1 s;} ul. menu li: hover. sub {height: auto ;}

The hover status will take effect, but the Transition fails. Solution the solution here is that we need to bypass the auto value as much as possible. Here we can use max-height to bypass the height: auto value. Of course, you can use max-width for width.

Ul. menu li. sub {max-height: 0; overflow: hidden; transition: all 1 s;} ul. menu li: hover. sub {max-height: 200px ;}

Note 1. We need to ensure that the value of max-height exceeds the maximum value of all items, that is, it must be covered. 2. The transiton here is a transition from 0 to 200px. We need to assign a proper transition duration and a reasonable max-height value for the best effect. That's all, Thank you.

---------------------------------------------------------------

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------