CSS网格动画在Chrome浏览器中无法使用

Question

如何在Chrome中使用CSS Grid制作动画？这是一个简单的样式，使用 Grid，它改变了 grid-template-columns 当元素具有 active 类。在火狐浏览器中也能用。但是... 在Chrome浏览器中却不行 这可能吗？

#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事件。

document.getElementById('app').classList.toggle('active');

Answer 1

简短的回答是，在Chrome浏览器中，它.., 没有迄今为止，在Chrome浏览器中是不可能的。

火狐浏览器出货动画的 grid-template-columns 在Firefox 66中，但Chromium团队还没有实现它。

我在MDN中加入了一张图片，上面有当前对动画的支持。grid-template-columns.

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

如果你点击一个特定的属性，你可以向下滚动，看看他们有什么浏览器支持。