CODEWITHSUNDEEP
javascriptvue.js
Santiago Hurtado
Santiago Hurtado

Reputation: 11

Why 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?

Upvotes: 1

Views: 41

Answers (1)

Dm Prkp
Dm Prkp

Reputation: 110

You must add css transition property and css properties you change:

vue docs

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;

Upvotes: 1

Related Questions