Estoy tratando de hacer una 'animación' simple usando una transición css directa. Durante la vida de la aplicación, los botones mostrar y ocultar deben comportarse como lo hacen, es decir. rápido. Pero al principio, quiero que la caja se comporte como el botón de crecimiento (es decir, una transición más lenta). Sin embargo, me gustaría poder interrumpir esta transición de crecimiento y hacer que "salte hasta el final" como si la función de apertura se hubiera hecho cargo.

Lo interesante es que si el botón 'finalizar' establece el estilo de ancho en el mismo valor que la transición de crecimiento, la transición de crecimiento no se interrumpe. Pero si configuro el nuevo valor de ancho en la función final ligeramente diferente, interrumpe la transición (vea el comentario en la función JavaScript end() del código).

 var box = document.getElementById('box'); function show() { box.style.transition = "width 0.1s"; box.style.width = "80vw"; } function hide() { /* alert("closeNav menu width = " + menu.style.width) */ box.style.transition = "width 0.1s"; box.style.width = "0vw"; } function grow() { box.style.transition = "width 5s"; box.style.width = "80vw"; } function end() { box.style.transition = "width 0.1s" box.style.width = "80.001vw"; // will not interrupt grow transition if set to 80vw } hide();

 #box { width: 80vw; height: 20vh; background-color: blue; border: 3px solid orange; transition: width 0.5s; }

 <div> <div id="box"></div> <button onclick="hide();" style="height: 25px;">Hide</button> <button onclick="show();" style="height: 25px;">Show</button> <button onclick="grow();" style="height: 25px;">Grow</button> <button onclick="end();" style="height: 25px;">End</button> </div>

¿Hay una mejor manera de tratar de lograr este efecto? Creo que la animación css simplemente haría lo mismo, ya que parece que, a menos que el nuevo valor sea diferente del valor anterior, la transición inicial no se detiene.

PD. Esta es una versión simplificada, y la más compleja es una superposición para un logotipo que se encoge en la esquina a medida que un menú lateral se expande lentamente para cumplir con la superposición que se reduce. Necesito que el menú se muestre/oculte rápidamente en función de sus botones después durante las operaciones normales, pero si el usuario no quiere esperar la transición de la superposición y la reunión del menú, puede hacer clic en cualquier lugar y finalizar la transición, lo que significa que el menú salta a su ancho completo de 'mostrar'.

Necesario para todos los navegadores, pero desarrollando esto en Google Chrome Versión 102.0.5005.115 (Compilación oficial) (64 bits)