Skip to content

Instantly share code, notes, and snippets.

@philbirnie

philbirnie/css-height-transition.md

Last active March 14, 2017 14:07
Show Gist options
  • Save philbirnie/66fbade3c77e475ac01b1438a5b7ee9f to your computer and use it in GitHub Desktop.
Save philbirnie/66fbade3c77e475ac01b1438a5b7ee9f to your computer and use it in GitHub Desktop.
Download ZIP
CSS Height Transition Options/Ideas
Raw
css-height-transition.md

CSS Height Transitions

Option 1: Max Height

This is when you set max-height on an element and then transition that property rather than height. This is simple but has obvious downsides:

  • If min-height is much larger than auto, there will be a delay, plus you put a max-height on your element.
  • The transition is relative to the element height. (e.g. 1000px min height, but 600px element means that the transition will be 0.6s.

Option 2: scaleY

Set a scaleY transform on the element from 1 to 0. However, this will not trigger a reflow. The ultimate question is whether or not you require reflow. If not, this is perfect. If yes, this is not appropriate.

Option 3: Javascript

In This Case we utilize javascript to calculate the element's height and then run a CSS transition. A little bit complicated, but it works. The obvious disadvantage is we've created another dependency.

Option 4: Flexbox

Use flex-column and transition the to-be collapsed element between flex: 0 and flex: 1. This still requires the element containing the flex elements to have a height set, which isn't particularly helpful over option 1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment