CSS Сетка анимации не работает в Chrome

Question

Как сделать анимацию с помощью CSS Grid в Chrome? Это простой стиль, использующий Grid, он меняет grid-template-columns, когда элемент имеет класс active. Работает в Firefox. Но ... в 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 на сегодняшний день

Firefox анимация доставки grid-template-columns в Firefox 66, но Chromium Команда еще не реализовала его.

Я включил изображение из MDN с текущей поддержкой анимации grid-template-columns.

Если вы хотите просмотреть анимируемые свойства CSS, У MDN хороший список здесь.

Если щелкнуть указанное свойство c, вы можете прокрутить вниз и посмотреть, какая поддержка браузера у них есть.