0
153
VistasTransición en múltiples elementos al mismo tiempo usando JavaScript
¡Salud! Tengo un problema al depurar cierto comportamiento que ocurre principalmente en el navegador Chrome. Aquí está el ejemplo simplificado: https://jsfiddle.net/pd3xb2uo/
El objetivo es hacer la transición de múltiples elementos a través del código JS al mismo tiempo. En el ejemplo, cuando hace clic en el botón, los elementos se mueven hacia la izquierda usando translate3d agregado a través de JS. Funciona bien, pero hay algunas advertencias:
- Hay una pequeña brecha que aparece entre los elementos la mayor parte del tiempo
- A veces, cuando hace clic más rápido en el botón, aparece un gran espacio entre los elementos.
Aquí están las capturas de pantalla de ambos casos:
Cualquier ayuda o idea sobre por qué está sucediendo sería muy apreciada :) Parece que hay un retraso de unos milisegundos antes de que el atributo de estilo se actualice en ciertos elementos, pero no tengo idea de por qué:/
1 Respuestas
Responde la pregunta0
El problema ocurre porque está transicionando 100 elementos al mismo tiempo y debido a las transiciones de medio píxel.
Si sabe qué ancho y cuántos elementos tiene, entonces puede hacerlo así:
const container = document.querySelector('.container-inner'); for (let i = 1; i < 100; i++) { const div = document.createElement('div'); div.classList.add('element'); div.textContent = `Element ${i}`; container.appendChild(div); } let transition = 0; document.querySelector('button').addEventListener('click', () => { transition -= 100; container.style.transform = `translateX(${transition}px)`; }); .container{ width: 100%; overflow: hidden; } .container-inner{ display: flex; flex-direction: row; transition: transform .3s; } .element { width: 100px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 2rem; text-align: center; transition: transform .3s; background-color: #A67583; } <button>Move</button> <div class="container"> <div class="container-inner"></div> </div>Ahora solo se cambia un elemento y funciona sin problemas.