Height Transition of a List

[ben03]

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

[dsonesuk]

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.

[ben03]

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

[Ingolme]

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.

 

[ben03]

This is helpful and makes sense, thanks also for sharing the link!