How it works

The problem

It would be nice if CSS could transition the size of elements between closed (zero) and their natural size. Or have parent elements transition their size based on which child is visible. While there are already some advances in getting browsers ready to handle this (see the interpolate-size question), it is not fully supported, and it also does not work in a generic way for all transitions.

There are a few approaches that are commonly used now, each with tradeoffs:

Common approaches

.panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
}
.panel.open {
	max-height: 2000px; /* I guess this will be larger than our content */
}

.panel-outer {
	display: grid;
	grid-template-rows: 0fr; /* collapsed */
	transition: grid-template-rows 0.25s ease;
}
.panel-outer.open {
	grid-template-rows: 1fr; /* expanded */
}
.panel-outer > * {
	overflow: hidden;
}

The lock-measure-animate-unlock (LMAU) cycle

Panel and PanelSet seem to be able to transition to or from a natural size, but they just use measurement to get explicit values. ‘Explicit’ sounds fancy, but it just means using real or relative values instead of auto. It is the same basic approach as used in for example react-collapse, but extended here to horizontal axes and panel switching. The sequence is the same for both:

1. Lock: write the current dimension as an inline style. This gives CSS a concrete start value.
2. Measure: make the target content briefly visible but absolutely positioned (so it does not affect flow), then read its offset dimension (offsetHeight or offsetWidth). This value is used in the next step.
3. Animate: set the container’s inline style to the measured value inside a requestAnimationFrame call. The CSS transition runs between the locked start and the measured end.
4. Unlock: once the transition ends, remove the inline style. The container is responsive again.

// Simplified.

// 1. Lock
container.style.height = container.offsetHeight + 'px';

// 2. Measure target (absolutely positioned, invisible)
nextPanel.style.position = 'absolute';
nextPanel.hidden = false;
const targetHeight = nextPanel.offsetHeight;

// 3. Animate
requestAnimationFrame(() => {
	container.style.height = targetHeight + 'px';
});

// 4. Unlock after transition
container.addEventListener('transitionend', () => {
	container.style.height = '';
	nextPanel.style.position = '';
}, { once: true });

What this enables

CSS variables can be used to coordinate the container’s size change with the inner panels' content change. It just makes the developer’s life easier.

Unstyled by design

Most animation components come bundled with a design system: colours, borders, spacing, and component structure. Getting your own design in there means fighting the library’s CSS. Kill the Chakra.

/* You want this */
.accordion { border-radius: 12px; }
.accordion-trigger { background: none; text-align: left; }

/* You get this instead */
::ng-deep .mat-expansion-panel {
	border-radius: 12px !important; /* still doesn’t work */
}
::ng-deep .mat-expansion-panel-header {
	background: none !important;
}

/* Zero CSS from the library */
.accordion { border-radius: 12px; }
.accordion-trigger { background: none; text-align: left; } /* just works */

FAQ (or:  Some remarks that people might have)

@supports (interpolate-size: allow-keywords) {
		[data-panelset].is-opening { height: auto; }
		[data-panelset].is-closing { height: 0; }
}