0
323
Views¿Por qué el componente de transición de vue no funciona?
Estoy tratando de mostrar modelos con efecto de transición.
<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>Aquí está el estilo
.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); } Se muestran modales pero sin efecto de transición, probé con mode="out-in" pero no funcionó, ¿qué debo hacer?
·
Santiago Trujillo
1 answers
Answer question0
Debe agregar la propiedad de transición css y las propiedades css que cambie:
Creo que esto debe funcionar:
.modal-enter .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.25); transform: scale(1.25); transition: opacity 0.5s ease; }o
... transition: transform 0.5s ease; ...si desea animar todos los accesorios modificados, debe agregarlos todos en su accesorio de transición:
transition: all 0.3s ease;
·
Santiago Trujillo
Report
Answer question