Problem understanding why the transition doesn't transfer to the sloted content

[wolfiton]

Hi everyone,

I create a custom horizontal menu component but have problems making the slotted content use the custom transition.

App.vue content

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
.hmenu-enter-active,
.hmenu-leave-active {
  opacity: 1;
  margin-left: 10px;
  transition: all 1s ease-out;
}
.hmenu-enter,
.hmenu-leave-to {
  opacity: 0;
  margin-left: -300px;
  transition: all 1s ease-in-out;
}
</style>

HorizontalMenu.vue

<template>
  <div>
    <span>
      <q-btn
        flat
        dense
        round
        icon="menu"
        aria-label="Menu"
        @click="show = !show"
        label="Menu"
      />

      <transition name="hmenu">
        <slot name="h-links">
          <q-list
            v-if="show"
            dense
            bordered
            padding
            class="rounded-borders h-nav"
          >
            <q-item clickable v-ripple>
              <q-item-section>
                Home
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section>
                About
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section>
                Comment
              </q-item-section>
            </q-item>
          </q-list>
        </slot>
      </transition>
    </span>
  </div>
</template>

<script>
export default {
  name: "HorizontalMenu",
  data() {
    return {
      show: true
    };
  },
  props: {
    icon: {
      type: String,
      default: ""
    },
    lorem: {
      type: String,
      default: "A simple card"
    }
  },
  methods: {
    ClickMe() {
      console.log("I am clicked");
    }
  }
};
</script>

<style scoped>
.h-nav {
  display: flex;
  flex-direction: row;
}
</style>

MainLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <HorizontalMenu>
        <template v-slot:h-links>
          <q-list
            v-if="show"
            dense
            bordered
            padding
            class="rounded-borders h-nav"
          >
            <q-item clickable v-ripple>
              <q-item-section>
                Slotted
              </q-item-section>
            </q-item>
          </q-list>
        </template>
      </HorizontalMenu>
      <q-toolbar>
        <q-toolbar-title>
          Quasar App
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import HorizontalMenu from "components/HorizontalMenu";

export default {
  name: "MainLayout",

  components: {
    HorizontalMenu
  },

  data() {
    return {
      show: true
    };
  },
  methods: {}
};
</script>

The full code can be found here https://github.com/wolfiton/horizontal-menu for any further testing.

Thanks in advance for any explanation or guidance

[wolfiton]

Is this related to Vue or this is something spefici to quasar, to not allow sloted content to be transitioned by the parent component?

[wolfiton]

I created sandbox with this problem here sandbox link