[Collapsible] POC using grid-template-* properties as open/close animation target

[mj12albert]

Demo: https://deploy-preview-1770--base-ui.netlify.app/experiments/collapsible2/transitions

API

The anatomy remains the same, except Collapsible.Panel must render an extra div around its children

CSS transitions:

.Panel {
  display: grid;
  grid-template-rows: 1fr;

  transition: all var(--duration);

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    grid-template-rows: 0fr;
  }
}

CSS animations:

@keyframes slide-down {
  from {
    grid-template-rows: 0fr;
  }

  to {
    grid-template-rows: 1fr;
  }
}

@keyframes slide-up {
  from {
    grid-template-rows: 1fr;
  }

  to {
    grid-template-rows: 0fr;
  }
}

.Panel {
  display: grid;

  &[data-open] {
    animation: slide-down var(--duration) ease-out;
  }

  &[data-closed] {
    animation: slide-up var(--duration) ease-in;
  }
}

👍

• Don't need to manage resizing when using CSS transitions

👎

• When transitioning, the size of the panel isn't 1:1 with the actual layout. Notice the size of the gap between the two collapsibles as it transitions:

collapsible2.mov

When transitioning height it looks like this:

collapsible1.mov

Ariakit has the same issue: https://codesandbox.io/p/sandbox/hungry-goldwasser-mktxk5

• It's even more difficult to suppress the initial open animation when using CSS animations

• I have followed (at least) the PR section of the contributing guide.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	f88b9b5
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/6808fd59f518ca0008e103d9
😎 Deploy Preview	https://deploy-preview-1770--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.