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