Vuejs: How to add Transition to slot content?-CodePudding

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 >
     <slot></slot>
</div>

And it's being used like

<Modal ...>
   <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?

CodePudding user response：

If I understood you correctly maybe like following snippet:

const app = Vue.createApp({
  data() {
    return {
      show: false,
    };
  },
})
app.component('modal', {
  template: `
    <div >
      <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" >
    <div >
       <b>slot content</b>
    </div>
  </modal>
</div>

CodePudding user response：

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

<div >
     <slot></slot>
</div>
...

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