Quiero crear una transición css y es importante que pueda "restablecer" el ancho de mi "caja" por adelantado, cada vez que se llama a mi función.
Con solo establecer el ancho del cuadro en cero, el elemento se reduce con la animación. Pero quiero reiniciar sin animación. Así que creé una clase que deshabilita y habilita el efecto antes y después de reiniciar. Desafortunadamente esto no funciona. Supongo que porque JavaScript es asincrónico y simplemente vuela sobre el comando width=0. Descubrí que si interrumpo el tiempo de ejecución con una alerta antes de eliminar la "notransición", funciona, pero por supuesto, esta no es una forma válida.
Siempre quise tener una solución para este problema asíncrono. Estaría muy feliz de recibir una explicación y una solución para mi intento y tal vez una solución aún mejor para el reinicio. ¡Gracias!
function test() { var duration = 5; document.getElementById("box").classList.add('notransition'); document.getElementById("box").style.width = 0 + "%" document.getElementById("box").classList.remove('notransition'); //Fill progress bar document.getElementById("box").style.setProperty('transition-duration', duration + 's'); document.getElementById("box").style.width = 100 + "%" setTimeout(function () { console.log("Progress finished") }, duration * 1000); } * { box-sizing: border-box; } html { padding: 0; margin: 0; width: 100%; } body { margin: 0; width: 100%; padding: 20px; } #box { border: 1px solid red; height: 20px; width: 10%; background-color: rgba(219, 72, 72, 0.3); transition-property: width; transition-duration: 0s; transition-timing-function: linear; } .notransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } <div id="box" onclick="test()"></div>Usando dos clases para alternar, específicamente para la propiedad transition-delay , funciona bastante bien. También debe permitir un pequeño retraso para restaurar el 10% antes de que comience la animación.
function test() { // "normal" transition delay is zero seconds let box = document.getElementById("box"); box.style.width = "10%"; // Allow a small delay (10ms) for the width to update on screen setTimeout(function() { // Change the transition delay and the width box.classList.remove('normal'); box.classList.add('transitionning'); box.style.width = "100%"; // When completed, restore the "normal" transition delay setTimeout(function() { console.log("Progress finished") box.classList.remove('transitionning'); box.classList.add('normal'); }, 5000); }, 10) } * { box-sizing: border-box; } html { padding: 0; margin: 0; width: 100%; } body { margin: 0; width: 100%; padding: 20px; } #box { border: 1px solid red; height: 20px; width: 10%; background-color: rgba(219, 72, 72, 0.3); transition-property: width; transition-timing-function: linear; } .normal { transition-duration: 0s; } .transitionning { transition-duration: 5s; } <div id="box" class="normal" onclick="test()"></div>