CSS 网格动画在 Chrome 中不起作用

Question

如何在 Chrome 中使用 CSS Grid 制作动画？这是一个简单的样式，使用，它会在元素具有类时Grid更改。它可以在 Firefox 中运行。但是……在 Chrome 中却没有。有可能吗？grid-template-columnsactive

#app {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 90px auto;
  grid-template-rows: 60px auto;
  grid-template-areas: "header header" "menu contenido";
  transition: all .3s ease;
}
#app.active {
    grid-template-columns: 200px auto;
  }

这里是 onclick 事件。

#app {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 90px auto;
  grid-template-rows: 60px auto;
  grid-template-areas: "header header" "menu contenido";
  transition: all .3s ease;
}
#app.active {
    grid-template-columns: 200px auto;
  }

Answer 1

简短的回答，不，到目前为止，这在 Chrome 中是不可能的

Firefox 在 Firefox 66 中提供了动画grid-template-columns，但 Chromium 团队尚未实现。

我包含了来自 MDN 的图像，当前支持动画grid-template-columns.

如果您想查找可动画化的 CSS 属性，MDN 这里有一个很好的列表。

如果您单击特定属性，您可以向下滚动并查看它们支持哪些浏览器。