wolfiton

Posted on Mar 25, 2020

Does Vue slotted content not inherite the transition of the parent?

#discuss #help #vue

Hi everyone,

So working on one of my projects, I created a menu animation with some default content and a named slot.

The slot, when used in another component, works but doesn't keep the animation of the menu parent, it becomes static.

This is how I expect this animation to work, this example doesn't use the slotted content menu-h animation link
The link is a live version.

My question is:

Does the VUE slotted content, not keep the parent's transition?

Thanks in advance for any resource or explanation regarding this matter.

I followed this guide vue slot guide

Top comments (5)

Tyler V. (he/him) • Mar 25 '20

It sounds like you may be experiencing the issue outlined here:

slot can't use in vue transtion component #4414

yonycat commented on Dec 08, 2016

Soucce code of defined transition-demo component

<template>
  <div class="doc-ctn computed">
    <h4 class="ctn-title">transition</h4>
    <div class="ctn-demo">

      <transition name="demo">
        <!-- slot fangzai   -->
        <slot ></slot>
      </transition>
    </div>
  </div>
</template>

Then i use transition demo component in parent component:

<transition-demo>
        I am disappearing
</transition-demo>

content ' I am disappearing' dose not rendered.

View on GitHub

If not could you provide a bit more detail about your code - preferably a sample or similar code in a online editor like Codepen.

wolfiton • Mar 25 '20 • Edited

Thanks for the link and ideas @tylerv, I really appreciated your input on my problem.

I am going to create a sandbox or codepen for this problem.

I created a codesandbox codesandbox link

So the following files are important here:

HorizontalMenu.vue located in src/components
MainLayout.vue located in src/layouts
App.vue located in src

Tyler V. (he/him) • Mar 25 '20

For making this easier to explain, I'm going to be using showing instead of show for the data in layouts/MainLayout.vue

I believe the issue is that when you use a <slot> the parent file that is passing in your slot values is the context that the slot contents will see. So when you click your menu button in your component, you're toggling show between true and false, but your slot is looking at the showing value.

There's also an issue where having a transition wrapping a transition will throw errors.

I forked your repo and have the transitions working here: codesandbox.io/s/serene-cori-kksi2

wolfiton • Mar 25 '20 • Edited

Thanks @tylerv for the help I will credit you in the github repo of the menu component, would that be alright with you?

Also, can I improve my component to make it more flexible in any way?(any suggestions regarding this idea)

Thanks again

Tyler V. (he/him) • Mar 25 '20

If you want to, it's always appreciated - but no need, I'm here to help 😄

As for your components being flexible, I think that depends on how you're planning to use them in the future - if you want to DM me and talk some more about this, feel free! My DMs should be open 🙂

DEV Community

Does Vue slotted content not inherite the transition of the parent?

Top comments (5)

slot can't use in vue transtion component #4414

Read next

📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔

Automate Saving the Planet... Or Just Your Computer's Energy 🐍

🌐 5 Steps to Debugging a Slow API: Ultimate Guide to Speed and Performance🌟 🚀

Reactive vs. Ref in Vue 3: What’s the difference?