如何中断CSS transition过渡并直接跳转至动画结束状态

使用原生CSS transition实现动画效果时，需满足以下交互逻辑：

• 应用全生命周期内，show、hide按钮始终保持快速响应的原有交互逻辑
• 初始阶段，方块元素执行grow按钮触发的慢速宽度过渡效果
• 支持主动中断运行中的慢速过渡，直接跳转至结束状态，最终效果与show函数触发的快速展开完全一致

测试中发现特殊表现：

若end按钮设置的width样式值与grow过渡的目标值完全相同，正在运行的grow过渡不会被中断；仅当end函数中设置的width值与目标值存在极细微差异时，才能成功中断过渡。

JavaScript逻辑 #

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"; // 此处设置为80vw时无法中断正在运行的grow过渡
}

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>

• 已测试CSS animation方案，表现与transition一致：仅当新设置的属性值与当前过渡目标值不同时，原有过渡才会被中断，需要更优雅的实现方案，无需通过设置近似值hack实现中断效果
• 实际业务场景：logo遮罩层收缩至角落的同时，侧边菜单缓慢展开与收缩的遮罩层衔接。正常交互阶段菜单的show/hide按钮需保持快速响应，若用户不想等待缓慢的过渡动画完成，可点击任意位置中断过渡，让菜单直接跳转至完全展开的显示宽度
• 兼容性要求：支持全主流浏览器，测试环境为64位官方正式版Google Chrome 102.0.5005.115

内容的提问来源于stack exchange，提问作者wm192