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



  • 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



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



  • I created sandbox with this problem here sandbox link


Log in to reply