How to make smooth transitions with vue js

Question

How to make smooth transitions with vue js

Navigation

#1 by (1 votes)

0

I try to make transitions between components in vue js what I try is to make a type of slider with a form, each side is a component and pressing continue changes the component to the right and if they press backward it goes to the left.

are the styles I occupy

    .fadeInLeft-enter-active {
        animation: slideInRight 1s;
    }
    .fadeInLeft-leave-active {
        animation: slideInLeft .5s reverse;
    }
    .fadeInRight-enter-active {
        animation: slideInLeft 1s;
    }
    .fadeInRight-enter-active {

        animation: slideInRight .5s reverse;
    }

If I go forward the animations look good but if I press the animation returns it does it wrong.

vue.js transacciones animated

asked by Jorge Alberto Ortega Ceja 11.10.2018 в 16:56

source

1 answer

Read full data of a json Save .csv in variable

score 1 · Answer 1

Using these classes you can make an element appear with a fade and moving to the left, with the change of the variable "showItem" that you have in your "data".

.fadeInLeft-enter-active {
  transition: all .3s ease;
}
.fadeInLeft-leave-active {
  transition: all .8s ease-in-out;
}
.fadeInLeft-enter, . fadeInLeft-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}



<transition name="slide-up" mode="in-out">
  <div v-if="showItem"></div>
</transition>