0
310
Vistas¿Hay alguna manera de animar elementos html dentro de un div para que entren en otro div y se centren en él?
Estoy trabajando en una sección de servicio que funciona con pestañas y tiene 2 componentes:
Pestañas de servicios. Donde muestro cada servicio con su respectivo título y descripción.
Información de servicio Donde muestro la información completa del servicio seleccionado.
Ya lo hice funcionar. Si hace clic en un servicio (1), se mostrará la información detallada en el div de información del servicio (2). Funciona creando la información del servicio (2) de antemano y activando y desactivando la visualización mediante JS.
Hasta ahora todo bien... Pero no quiero que aparezca la información del servicio; Quiero hacer que cuando haga clic en un servicio (1), su icono y título se animen y se coloquen en la posición correcta dentro del contenedor de información del servicio (2). Entonces se ve más elegante que solo mostrar la información.
Ejemplo:
Ya he hecho algunos progresos, pero me temo que no lo estoy haciendo bien. Ya que estoy usando la transformación CSS: traducir y posicionar manualmente los elementos moviéndolos (x, y) px desde su origen.
/* .TabNavItem represents a tab from Service Tabs (1) And JS sets the .active class to the clicked tab */ .tabNavItem h3 { transition: ease-in-out 0.3s; } #tab1.active .serviceIconContainer { opacity: 0.2; transform: translate(0px, 260px); } #tab1.active h3 { transform: translate(315px, 130px) scale(1.5); }¿Hay alguna forma de hacer que los elementos se centren en el div de información de servicio (2), en lugar de hacerlo manualmente con transform translate?
¿Y hay alguna forma de hacer que la pestaña Servicio (1), para el servicio seleccionado, se oculte del contenedor de pestañas sin que desaparezcan los elementos que contiene? De esa manera, en el contenedor de pestañas (1) muestra solo los servicios inactivos para que hagas clic.
Traté de hacer:
.tabNavItem.active { visibility: hidden; }Pero el icono y h3 también desaparecen.
Ejemplo:
