Transition with Vue grid

Question

I have the following code in my component:

HTML

<template>
  <div
    id="app"
    :class="[
      { 'hide-menu': !isMenuVisible || !user },
      { 'hide-header-footer': !user },
    ]"
  >
    <Header title="Placebet" v-if="user" />
    <Menu v-if="user" />
    <Content />
    <Footer v-if="user" />
  </div>
</template>

JS

import { mapState } from 'vuex';
import Header from '@/components/template/Header';
import Menu from '@/components/template/Menu';
import Content from '@/components/template/Content';
import Footer from '@/components/template/Footer';

export default {
  name: 'App',
  components: { Header, Menu, Content, Footer },
  computed: mapState(['isMenuVisible', 'user']),
}

CSS

<style>
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  display: grid;
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    'header header'
    'menu content'
    'menu footer';
  transition: all 1s;
}

#app.hide-menu {
  grid-template-areas:
    'header header'
    'content content'
    'footer footer';
}

#app.hide-header-footer {
  grid-template-areas:
    'content content'
    'content content'
    'content content';
}
</style>

Is it possible to add a transition to this grid switch? Using the Transition tag, I was able to make enter-active have the transition I chose, but when it came to hiding the menu, the transition did not work.