Search code examples
vue.jsvue-componentvuejs3vue-transitionsvue-slot

Vuejs: How to add Transition to slot content?

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?

Solution

  • 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;
}