0

Intento hacer transiciones entre componentes en vue js lo que intento es hacer un tipo de slider con un formulario, cada cara es un componente y al presionar continuar cambia el componente hacia la derecha y si presionan retroceder va hacia la izquierda.

son los estilos que ocupo

    .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;
    }

si voy hacia delante las animaciones se ven bien pero si presiono regresa la animación la hace mal.

3
  • Como tenes definidas las transiciones en tu template. probaste con animate.css que ya tiene todas las transiciones escritas?
    – gbianchi
    Commented el 11 oct. 2018 a las 15:05
  • Si te das cuenta estoy ocupando animate, con la variable animation que esta bindiada de esta forma :name="animation" cambio la animación según sea el caso Commented el 11 oct. 2018 a las 21:11
  • Ok podras entonces compartir un ejemplo mínimo verificable de tu template
    – gbianchi
    Commented el 11 oct. 2018 a las 21:18

1 respuesta 1

1

Usando estas clases puedes hacer que un elemento aparezca con un fade y trasladándose hacia la izquierda, con el cambio de la variable "showItem" que tengas en tu "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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.