0
333
ViewsWhy vue transition component is no working
Im triying to show models with transition effect
<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 style
.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);
}
Modals are showing but without transition effect, i tried with mode="out-in" but did not work, what should i do?
·
Santiago Trujillo
1 answers
Answer question0
You must add css transition property and css properties you change:
i`ll think this must works:
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.25);
transform: scale(1.25);
transition: opacity 0.5s ease;
}
or
...
transition: transform 0.5s ease;
...
if you want to animated all changed props, you need to add all in your transition prop:
transition: all 0.3s ease;
·
Santiago Trujillo
Report
Answer question