I'm trying to do a simple 'animation' using a direct css transition. For the life of the app, the show and hide buttons are to behave as they do, ie. quick. But in the beginning, I want to have the box behave like the grow button (ie. a slower transition). However, I'd like to be able to interrupt this grow transition and have it 'jump to the end' as if the open function had taken over.
The interesting thing is that if the 'end' button sets the width style to the same value as the grow transition, the grow transition isn't interrupted. But if I set the new width value in the end function just ever so slightly different, it does interrupt the transition (see comment in code's JavaScript end() function).
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>Is there a better way of trying to achieve this effect? I think css animation would just do the same thing since it seems that unless the new value is different from the old value, the initial transition doesn't stop.
ps. This is a simplified version, with the more complex one being an overlay for a logo that shrinks into the corner as a side menu slowly expands to meet the shrinking overlay. I need the menu to still quickly show/hide based on its buttons afterwards during normal operations but if the user doesn't want to wait for the transition of the overlay and menu meeting, they can click anywhere and end the transition which means the menu pops to its full 'show' width.
Need for all browsers, but developing this on Google Chrome Version 102.0.5005.115 (Official Build) (64-bit)
You can do a trick with the width reset combining with requestAnimationFrame (or setTimeout), but actually, it won't reset your width and continue the animation from the remaining width.
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.width = "0"; //reset width
window.requestAnimationFrame(function(){
box.style.width = "80vw";
box.style.transition = "width 0.1s";
});
}
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>