Comments on: Using CSS Transitions on Auto Dimensions

By: Chris Coyier

Chris Coyier — Fri, 13 Apr 2018 16:08:09 +0000

Jeroen Sormani wrote in with this example:

By: Chris Coyier

Chris Coyier — Tue, 05 Dec 2017 19:53:59 +0000

Maurice Carey also stumbled upon the CSS custom properties approach:

By: Chris Coyier

Chris Coyier — Wed, 26 Jul 2017 20:23:19 +0000

Aaron Davidson wrote in with a way to get those height measurements in JavaScript, but then pass the data back to CSS in the form of CSS custom properties for it to transition:

By: Nico

Nico — Wed, 29 Mar 2017 13:37:30 +0000

I've made some tests too for my accessible scripts, transition on max-height is not perfect, but it does the job (I've tested a combination of scaleX and max-height, but didn't get cool results for the moment). If it becomes too complicated on tiny screens (too much content), you may remove the transition and simply use display: none . Another keypoint for accessibility (if you want to avoid focusable hidden content): you can't animate display. Here is the trick, you can animate visibility with a delay (so it will be "animated" at the end of the transition):

.animated-accordion__panel {
 display: block;
 overflow: hidden;
 opacity: 1;
 transition: visibility 0s ease, max-height 1s ease, opacity 1s ease ;
 max-height: 100em;
 /* magic number for max-height = enough height */
 visibility: visible;
 transition-delay: 0s;
 margin: 0;
 padding: 0;
}
/* This is the hidden state */
[aria-hidden=true].animated-accordion__panel {
 display: block;
 max-height: 0;
 opacity: 0;
 visibility: hidden;
 transition-delay: 1s, 0s, 0s;
 margin: 0;
 padding: 0;
}

By: Torleif Halseth

Torleif Halseth — Tue, 28 Mar 2017 17:44:10 +0000

Awesome article and documentation Brandon. We just created a package (react-css-collapse) using very much the same techniques as you explain in technique 3. Maybe someone here finds it useful :)

By: Stas Gavrylov

Stas Gavrylov — Sun, 26 Mar 2017 06:48:30 +0000

Wow, that flex transition trick is awesome. Never really thought about that. So simple :)

By: Peter

Peter — Tue, 21 Mar 2017 19:47:42 +0000

In reply to Michał Sadowski. Do you have a codepen of this? I would like to try it out. Sounds interesting.

By: Chad Pierce

Chad Pierce — Tue, 14 Mar 2017 16:35:11 +0000

In reply to Jiri Thiemel. I have used this many times before. It does require that the items be visible when you calculate the heights first tho.

By: Keith J. Grant

Keith J. Grant — Tue, 14 Mar 2017 15:23:23 +0000

FWIW, there is an issue open in the CSS WG’s github: https://github.com/w3c/csswg-drafts/issues/626. Feel free to give it a thumbs-up if you would like to show support for a native solution in CSS.

By: daiasobi

daiasobi — Tue, 14 Mar 2017 12:35:48 +0000

I think it is better to use javaScript (or jQuery) when animating an accordion, because the other css only or JS mixed css options don’t accomplish the goal completely.
jQuery 3.1.1 uses requestAnimationFrame, so animating the height it is sufficiently smooth.
This is the state of the art…

By: Al Ramos

Al Ramos — Mon, 13 Mar 2017 13:32:08 +0000

I’ve used technique 1 myself but instead of hard-coding the max-height I give it a very high max-height and use cubic-bezier easing on the transition to give it a slow to fast easing on hover then fast to slow on unhover.

.element {
 max-height: 0;
 transition: max-height 0.3s cubic-bezier(0,1,0,1);
}

.element:hover {
 max-height: 9999px;
 transition: max-height 0.3s cubic-bezier(1,0,1,0);
}

http://codepen.io/foxareld/pen/XMgMvP

By: Michał Sadowski

Michał Sadowski — Mon, 13 Mar 2017 11:18:17 +0000

What I do I use a js solution: Before collapsing the element I set its height through element.scrollHeight and then apply a css class with {height: 0px !important; overflow: hidden};

By: Jiri Thiemel

Jiri Thiemel — Sun, 12 Mar 2017 01:33:50 +0000

The simplest solution is probably that one used e.g. by Bootstrap for mobile menu (if I remember correctly). At least I used the following solution couple of times with a nice result. Just calculate the real height of the toggled element before each toggle and put it into inline style as max-height. The rest is the same – CSS transition between max-height 0 and the one specified inline.

By: kyrodes

kyrodes — Sat, 11 Mar 2017 20:28:12 +0000

In reply to Pedro Rivera. font-size transition causes reflow though.

By: Sandy Campbell

Sandy Campbell — Sat, 11 Mar 2017 18:25:54 +0000

I’ve tried many of these solutions with “Read More” text, and having to specify a height, or maximum height, doesn’t work because the additional text can be a couple of sentences to a whole page. At least for now I’ve eliminated using transitions with collapsing sections.