Categories
Tutorials

Transitioning Element’s Height with CSS

No browser can animate a css property to and from auto correctly. In order to trick it we just need to add some numbers to initial and final state or the way to say this is to start and end state.

So let’s start with an example where we would start how  animation and transition looks with the default value or in their original state.

First Example

See the Pen CSS Height Before by Samiullah Khan (@samiullah1989) on CodePen.6143

By default block level elements take up the height of the content inside. In this case we have a paragraph with some lorem ipsum.

.box{
background: #ccc;
transition: all 0.5s ease-out;
height:auto;
}

.box:hover{
height: 150px;
}

On hover, I’ve increased it’s height to 150px. I do have added all the css properties it needs to transition properly from two states but still there is no smooth behavior, instead we see straight up jumps from start to end state.

Second Example

We will take a peek of another example and we are going to fix after.

See the Pen CSS Height Example 2 by Samiullah Khan (@samiullah1989) on CodePen.6143

Here we while hover over the Download button, we suppose to see the menu to be revealed in a smooth fashion (like we see in SlideDown) which is not happening again. Another weird behavior with CSS.

li>ul{
  padding: 0;margin: 0;
  background: #ddd;
  width: 100%;
  display: none;
  overflow: hidden;
  /* height:0; */
  transition: all 0.7s ease-in-out;
}

ul li:hover ul{
  display: block;
  height: 100px;
}

Here we did not added any numbers to the height property while writing styles for the Download button. Simply by adding height:0; to the initial state, (which is shown next and which we also want in our case to go from nothing to something) everything starts to fit in-place.

Workaround

See the Pen CSS Height Example 2 Fixed by Samiullah Khan (@samiullah1989) on CodePen.6143

li>ul{
  height:0px;
  transition: all 0.7s ease-in-out;
}

ul li:hover ul{
  height: 100px;
}

Just by comparing with previous example (the second codepen embed), I found out that I’ve used the display property. Although the <ul> or <li> doesn’t need any property to get and in second example we explicitly added display: none; just to show the visible and invisible state. In last example as applied the zero height, the display:none is worthless.

Conclusion

As we can see in about example the the menu or section that is revealed while hovering on button, we get a much larger version of it when we don’t need it as we have only two option to select. So now we came to the part which is called in Web Development Magic Numbers. 100px would sound perfect in case where there were more option added along with “Download Video” and “Download MP3”, but in our case 100px in long enough. So go ahead and fiddle with it’s height (unless you make it perfect).

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.