Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

110
Vistas
Cómo animar desde la longitud 0 -> 100 pero eliminar la animación desde 100 -> 0

tengo esta linea de tiempo

 <div class="timeline-wrapper"> <div class="timeline-item"> <div class="timeline-loaded" style="width: 100%"></div> </div> <div class="timeline-item"> <div class="timeline-loaded" style="width: 100%"></div> </div> <div class="timeline-item"> <div class="timeline-loaded" style="width: 83%"></div> </div> </div>

Entonces, el último elemento sube de 84, 85, etc., pero cuando restablezco la línea de tiempo, quiero tener el ancho de estilo de todos los elementos: 0%, pero luego tiene la animación de transición, por lo que ve que va a 0 pero necesita vaya a 0 al instante y llene suavemente de 0 a 100%.

¡Cualquier ayuda es bienvenida!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Al leer tu pregunta, lo que obtuve es que necesitas una barra de progreso. Puedes referirte a esto. https://www.w3schools.com/howto/howto_js_progressbar.asp

 var i = 0; function move() { if (i == 0) { i = 1; var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); i = 0; } else { width++; elem.style.width = width + "%"; } } } }

Básicamente modificará el ancho de su clase. Si necesita más ayuda con esto, elabore más su requisito con jsfiddle o lo mismo.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda