Tengo un elemento de barra de alternancia en el que estoy trabajando y actualmente lo tengo funcionando correctamente para diseñar el botón alternado, pero quiero más animación. La idea es hacer que el botón activo actual se deslice hacia cualquier botón que esté activo recientemente. Entonces, visualmente, lo único que agregaría al código actual es la animación de diapositivas. Cómo hacer eso exactamente es donde me estoy atascando. Ahora el elemento activo no solo obtiene un fondo y algunos estilos, sino que se necesitará un cuadro flotante/deslizante (creo)
No quiero que nadie lo implemente por mí, pero tengo problemas para pensar en cómo implementarlo. ¿Hago algo con pseudoelementos? ¿Cómo me aseguro de que el elemento de fondo del botón blanco sea tan ancho como la palabra que debe estar detrás?
Esta es más o menos una pregunta general de CSS, pero no estoy seguro de cómo iniciar este proceso.
Si alguien tiene algún consejo o truco sobre cómo hacer que esto funcione o simplemente me indica la dirección correcta, ¡lo agradecería mucho! ¡Salud!
Si desea hacerlo desde cero y tiene la capacidad de controlar la posición del cuadro blanco en relación con el cuadro amarillo (posición: relativa o absoluta), puede codificarlo creando una función que tome la coordenada deseada del cuadro, verifique si el cuadro blanco está en el lugar correcto, y si no lo mueve x px en la dirección correcta, se llama a sí mismo recursivamente con un tiempo de espera.
Esencialmente, muévelo un poco cada pocos milisegundos hasta que llegue al lugar correcto. un movimiento cada (1000/24) ms o menos debería hacer que parezca fluido.
En cuanto al tamaño, puede codificar esa misma idea o crear una función que encuentre el tamaño correcto en función del texto dado.
Puede 'crear un espacio' para que el bloque blanco se desplace, de modo que quede detrás del texto pero delante de los fondos colocando los colores de fondo en los elementos usando pseudoelementos con un índice z más bajo.
Al hacer clic en un botón, puede mirar el botón en el que se hizo clic anteriormente y calcular cuánto debe moverse el bloque blanco para llegar al botón actual, y también cómo debe cambiar su ancho.
En este fragmento, el 'bloque blanco' es, de hecho, un pseudo elemento en el botón en el que se ha hecho clic actualmente. Esto facilita la determinación de su lugar de descanso final, que se encuentra directamente debajo del botón en el que se ha hecho clic actualmente.
const buttons = document.querySelectorAll('button'); function clicked(e) { const el = e.target; const prevEl = document.querySelector('button.animate'); const x = (prevEl == null) ? '0%' : (prevEl.getBoundingClientRect().x - el.getBoundingClientRect().x) + 'px'; const w2 = window.getComputedStyle(el).width; const w1 = (prevEl == null) ? 0 : window.getComputedStyle(prevEl).width; buttons.forEach(button => { button.classList.remove('animate'); }); el.style.setProperty('--x', x); el.style.setProperty('--w1', w1); el.style.setProperty('--w2', '100%'); el.classList.add('animate'); } buttons.forEach(button => { button.addEventListener('click', clicked); } ); nav { display: inline-block; position: relative; } nav::before { content: ''; position: absolute; background-color: gold; width: 100%; height: 100%; left: 0 top: 0; z-index: -3; } button { margin: 2vmin; background-color: transparent; position: relative; } button::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: brown; z-index: -2; } button.animate::after { content: ''; position: absolute; background-color: white; width: 100%; height: 100%; animation-name: move; animation-duration: 3s; animation-fill-mode: forwards; top: 0; left: 0; z-index: -1; } @keyframes move { 0% { transform: translateX(var(--x)); width: var(--w1); } 100% { transform: translateX(0); width: var(--w2); } } @keyframes animate { 0% {} 100% { background-color: white; } } <nav> <button>AAAA</button> <button>AA</button> <button>AAAAAA</button> <button>A</button> </nav>