ben03 Posted August 23, 2018 Share Posted August 23, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 23, 2018 Share Posted August 23, 2018 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. Link to comment Share on other sites More sharing options...
ben03 Posted August 23, 2018 Author Share Posted August 23, 2018 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 Link to comment Share on other sites More sharing options...
Ingolme Posted August 23, 2018 Share Posted August 23, 2018 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. Link to comment Share on other sites More sharing options...
ben03 Posted August 23, 2018 Author Share Posted August 23, 2018 This is helpful and makes sense, thanks also for sharing the link! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now