Estoy tratando de animar un diseño de cuadrícula usando transiciones. Por lo que puedo decir, esto debería implementarse: https://ishoudinireadyyet.com/
Incluso encontré una demostración de este funcionamiento: https://codepen.io/matuzo/post/animating-css-grid-layout-properties
Pero no puedo hacer que funcione yo mismo. ¿Qué estoy haciendo mal? https://stackblitz.com/edit/gridlayout-animation?file=index.html
const toggleSidebar = () => { const layoutEl = document.querySelector('.layoutEl'); const currentWidth = getComputedStyle(layoutEl).getPropertyValue('--collapse-panel-width'); const isOpen = currentWidth == '30rem'; layoutEl.style.setProperty('--collapse-panel-width', !isOpen ? '30rem' : '2rem'); }; @property --collapse-panel-width { syntax: '<length>'; initial-value: 2rem; inherits: true; } .layoutEl { --collapse-panel-width: 2rem; display: grid; overflow: hidden; grid-template: 'header header' auto 'content sidebar' 1fr 'footer footer' auto / 1fr var(--collapse-panel-width); gap: 0.3rem; height: 100vh; transition-property: all; transition-duration: 0.5s; transition-timing-function: ease-in-out; } header { grid-area: header; background-color: #0055ff; color: white; } main { grid-area: content; } aside { grid-area: sidebar; background-color: #0055ff; color: white; } footer { grid-area: footer; background-color: #0055ff; color: white; } <html> <head> <meta charset="UTF-8" /> </head> <body class="layoutEl"> <header>Header</header> <main> <h1>Main content</h1> <button type="button" onclick="toggleSidebar()">Toggle sidebar</button> </main> <aside>Sidebar</aside> <footer>Footer</footer> </body> </html>