0
174
Vistasrecorrer los elementos y configurar el estilo CSS al mismo tiempo
Así que quiero recorrer los elementos con una clase y luego recorrer el elemento individual y disminuir gradualmente la propiedad css "izquierda".
let move = document.getElementsByClassName("move"); for (var i = 0; i < move.length; i++) { const left = move[i].getBoundingClientRect().left; const elementId = move[i].id; for (let j = left; j > -20; j--) { document.getElementById(elementId).style.left = j + "%"; await new Promise(resolve => setTimeout(resolve, 20)); } }Sin embargo, estoy usando "aguardar" para retrasar para que se mueva lentamente y no se deslice por la pantalla. Lo quiero para que todos los elementos tengan su propiedad CSS izquierda disminuida al mismo tiempo. Pero en cambio, debido a la espera, el primer elemento aumenta su propiedad izquierda y cuando su propiedad izquierda llega al final, solo entonces se va el siguiente elemento. por favor avise
2 Respuestas
Responde la pregunta0
Si bien creo que sería mejor usar transiciones/animaciones de CSS puro para esto, podría usar un bucle while para iterar sobre los elementos con la clase de move , restando el 1% de su valor izquierdo hasta que estén completamente fuera de la pantalla (derecha <= 0).
const start = async () => { const move = document.getElementsByClassName("move"); const canMoveLeft = () => { const move = document.getElementsByClassName("move"); for (let i = 0; i < move.length; i++) { if (move[i].getBoundingClientRect().right > 0) return true; } return false; }; while (canMoveLeft()) { for (let i = 0; i < move.length; i++) { const { left, right } = move[i].getBoundingClientRect(); if (right > 0) { const windowWidth = window.innerWidth; const leftVal = `${Math.round((left / windowWidth) * 100) - 1}%`; document.getElementById(move[i].id).style.left = leftVal; } } await new Promise((resolve) => setTimeout(resolve, 20)); } }; 
0
Por lo que entendí, desea animar la propiedad left de los elementos con la clase "mover".
Si ese es el caso, puedes hacer:
1º:
agregar propiedad de transición en la clase de move
.move { transition: left 2s; }2do:
let move = document.getElementsByClassName("move"); for(let item of move) { item.style.left = "-20%"; }