Vuejs: How to add Transition to slot content?

Question

I have a modal component that handles the overlay and css etc. and allows for modal content to be passed in via a slot:

<div class="slot-content">
     <slot></slot>
</div>

And it's being used like

<Modal ...>
   <div class="some-modal-content-div">
   ...
   </div
</Modal>

Currently the modal appearance is a bit "abrupt". I do want the overlay be there instantly, but would like to add a bit of a transition to the appearance of the content div.

How do I add a <Transition> to just the slot content?

plop a `v-if="$slots.default"` on the div in the transition – Lawrence Cherone Dec 22 '22 at 17:09 — Lawrence Cherone, Dec 22 '22 at 17:09
Unfortunately that doesn't appear to be working. – TommyF Dec 22 '22 at 17:20 — TommyF, Dec 22 '22 at 17:20

score 0 · Answer 1 · answered Dec 22 '22 at 19:39

If I understood you correctly maybe like following snippet:

const app = Vue.createApp({
  data() {
    return {
      show: false,
    };
  },
})
app.component('modal', {
  template: `
    <div class="slot-content">
      <p>other content</p>
      <transition name="slide-fade" appear>
         <slot></slot>
       </transition>
    </div>
  `
})
app.mount('#demo')

.slide-fade-enter-active {
  transition: all 0.5s ease-out;
}

.slide-fade-leave-active {
  transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.mod {
  border: 1px solid purple;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="show = !show">show</button>
  <modal v-if="show" class="mod">
    <div class="some-modal-content-div">
       <b>slot content</b>
    </div>
  </modal>
</div>

This works great in the demo, but didn't work for me when the `` was the root element of the actual element that had the `v-if`. However I noticed that simply applying the animation directly through a css class without a `` is exactly what I needed. Thanks for the help though! — TommyF, Dec 23 '22 at 08:04

score 0 · Accepted Answer · answered Dec 23 '22 at 08:02

I was actually too fixated on using the vue Transition instead of just applying the css animation directly to the slot content container:

<div class="slot-content animate-class">
     <slot></slot>
</div>
...

.animate-class {
   animation: foo 0.1s;
}

Vuejs: How to add Transition to slot content?

2 Answers2