Vue-js-modal: What transitions are supported?

[dland512]

What are the valid values for the transition property?

[euvl]

Well, it should be string 😄

https://github.com/euvl/vue-js-modal/blob/0be4f011eff2393439c40c8a2308ac83295463cd/src/Modal.vue#L13

https://github.com/euvl/vue-js-modal/blob/0be4f011eff2393439c40c8a2308ac83295463cd/src/Modal.vue#L67-L69

[dland512]

Not what the data type of the property is, but what are the valid values it can have, e.g. "fade-in", "slide-in", etc.

Basically I want the dialog to slide up from the bottom rather than fade in. Is that possible?

[euvl]

the valid values is a name of whatever transition you will make.
It is possible, if you will create fade in transition, its like 4 lines of css.

[va3093]

@dland512 I had the same question as you and as I am a noob to Vue I didn't find @euvl 's comments very helpful (no disrespect).

I had a read through the source code and found that the modal div in the Modal.vue file is wrapped in a transition element. See the Vue Transition Docs for details on how transitions work.

Essentially all you need to do is pick a name like fade and then make sure the appropriate css classes that Vue will be looking for are available. Here is an example for fading in.

.fade-enter,
.fade-leave-to { opacity: 0; }
.fade-enter-active,
.fade-leave-active { transition: .5s; }

Then when you create your component set the transition parameter to fade and your 👌 .

<modal name="hello-world" transition='fade'>
    Hello, ☀️!
</modal>

I hope this helps others.