使用CSS变量实现grid网格布局过渡动画失效如何解决？

你的代码无法触发网格布局过渡动画的核心原因是：当前绝大多数浏览器不会将自定义CSS属性纳入transition-property: all的覆盖范围，你需要在过渡配置中明确指定需要监听变化的自定义属性。

你仅需要修改.layoutEl选择器下的过渡配置即可正常实现效果，修改后的对应代码如下：

.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: --collapse-panel-width 0.5s ease-in-out;
}

你通过@property注册的--collapse-panel-width已经被定义为长度类型，本身完全具备可动画的基础，只要明确告知浏览器需要过渡该属性，网格布局就会跟随变量的数值变化实现平滑过渡。

内容的提问来源于stack exchange，提问作者Øystein Amundsen