Trying to display models with transition effects
<template>
<transition name="modal">
<v-tour v-if="tourType === 'normal'"
name="myTour"
:steps="steps"
/>
<v-tour
v-else-if="tourType === 'tip'"
type="tip"
name="myTour"
:sticky="true"
/>
<v-tour
v-else
:type="tourType"
name="myTour"
></v-tour>
</transition>
Here is the styling code
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
The modals are displaying but without the transition effect. I tried using mode="out-in" but it did not work. Any suggestions on what I should do?