Jump to content
ben03

Height Transition of a List

Recommended Posts

Hi there,

  I am working on a tree structure using lists. When you click on a button in a list item, it opens a sublist up.

When a sub-list is opened, the tree below moves down, and up if closed. It does this with a jolt, and am I hoping there is a way to animate this smoothly?

The problem I am having is that all tutorials I have found use a hard-coded max-height to animate from and to. I cannot do this as the list has to be able to be any size. Also the structure is dynamically generated which also makes it quite hard to append classes to certain points.

Is there a way to do achieve a smooth height transition in this scenario?

Thanks

Share this post


Link to post
Share on other sites

Can't you use height: 0% to 100%, the height 100% is not to specific height so it will open to content height, unless you are using positioning absolute, fixed I can't see a problem.

Share this post


Link to post
Share on other sites
li{height: 48px; overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;}

li.tree-is-expanded{height: 100%;}

This would essentially hide the nested ul until the class '.tree-is-expanded' is added. But the transition jumps as opposed to shows the transition. I have also tried targeting the nested ul but this doesn't work either:

li ul{height: 48px;
  overflow: hidden; 
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;}
   
li.tree-is-expanded ul{height: 100%;}

Thanks

Share this post


Link to post
Share on other sites

This is a known limitation of CSS. The max-height solution is the best pure CSS solution that you will find. You just have to set max-height to a large enough number. The side-effects of the max-height solution are that it opens really quickly but there is a slight delay before closing, if you've set it to be really large.

They only way to get the exact behavior you want is to use Javascript.

CSS-tricks has a descriptive article about the issues with height transitions in CSS: https://css-tricks.com/using-css-transitions-auto-dimensions/

Quote

If you were hoping I had a magical, complete solution to this problem, I'm sorry to disappoint you. There's no one solution that achieves the desired effect without downsides. There are, however, multiple workarounds that each come with a different set of advantages and disadvantages, and in most use cases at least one of them will get the job done in an acceptable manner. I'll outline the major ones, and list out their ups and downs so you can hopefully pick the best one for your situation.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×