Spring 还是 Ease-out：按动作的语义选

<section class="curve-demo">
  <label>
    Drawer position
    <input type="range" min="-240" max="0" value="-240" data-drawer-range>
  </label>
  <button type="button" data-drawer-toggle>Open drawer</button>
  <div class="drawer-stage">
    <aside class="drawer" data-drawer aria-label="Settings drawer">Settings stay attached to the drag position.</aside>
  </div>
  <button type="button" data-save>Save settings</button>
  <p class="save-status" data-save-status data-state="idle" role="status" aria-live="polite">Ready to save.</p>
</section>

<style>
.curve-demo { display: grid; gap: 12px; max-width: 32rem; }
.drawer-stage { overflow: hidden; min-height: 4rem; border: 1px solid currentColor; }
.drawer { width: 14rem; min-height: 4rem; padding: 12px; background: Canvas; }
.save-status { opacity: 0; transform: translateY(6px); transition: opacity 160ms ease-out, transform 160ms ease-out; }
.save-status[data-state="saving"], .save-status[data-state="saved"] { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .save-status { transition-duration: 1ms; }
}
</style>

<script>
const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
const drawer = document.querySelector("[data-drawer]");
const drawerRange = document.querySelector("[data-drawer-range]");
const drawerToggle = document.querySelector("[data-drawer-toggle]");
const saveButton = document.querySelector("[data-save]");
const saveStatus = document.querySelector("[data-save-status]");
let drawerPosition = -240;
let drawerVelocity = 0;
let drawerTarget = -240;
let lastInputTime = performance.now();
let cancelDrawerSpring = () => {};

function springTo(element, from, target, releaseVelocity = 0, onUpdate = () => {}) {
  let position = from;
  let velocity = releaseVelocity;
  let previous = performance.now();
  let frame = 0;
  let finished = false;
  const stiffness = 340;
  const damping = 34;
  const update = (nextPosition, nextVelocity) => {
    position = nextPosition;
    velocity = nextVelocity;
    element.style.transform = "translateX(" + position + "px)";
    onUpdate(position, velocity);
  };
  const cleanup = () => {
    reducedMotionQuery.removeEventListener("change", onReducedMotionChange);
  };
  function onReducedMotionChange(event) {
    if (event.matches) finish();
  }
  const finish = () => {
    if (finished) return;
    finished = true;
    window.cancelAnimationFrame(frame);
    update(target, 0);
    cleanup();
  };
  const cancel = () => {
    if (finished) return;
    finished = true;
    window.cancelAnimationFrame(frame);
    onUpdate(position, velocity);
    cleanup();
  };

  if (reducedMotionQuery.matches) {
    finish();
    return () => {};
  }

  reducedMotionQuery.addEventListener("change", onReducedMotionChange);
  const tick = (now) => {
    if (finished) return;
    const dt = Math.min((now - previous) / 1000, 0.032);
    previous = now;
    velocity += (-stiffness * (position - target) - damping * velocity) * dt;
    position += velocity * dt;
    update(position, velocity);
    if (Math.abs(velocity) < 0.1 && Math.abs(position - target) < 0.1) {
      finish();
      return;
    }
    frame = window.requestAnimationFrame(tick);
  };

  frame = window.requestAnimationFrame(tick);
  return cancel;
}

function setDrawerPosition(position, velocity = 0) {
  drawerPosition = Math.max(-240, Math.min(0, position));
  drawerVelocity = velocity;
  drawer.style.transform = "translateX(" + drawerPosition + "px)";
  drawerRange.value = String(Math.round(drawerPosition));
}

function settleDrawer(target = drawerPosition > -120 ? 0 : -240) {
  cancelDrawerSpring();
  drawerTarget = target;
  drawerToggle.textContent = target === 0 ? "Close drawer" : "Open drawer";
  cancelDrawerSpring = springTo(drawer, drawerPosition, target, drawerVelocity, (position, velocity) => {
    drawerPosition = position;
    drawerVelocity = velocity;
    drawerRange.value = String(Math.round(Math.max(-240, Math.min(0, position))));
  });
}

drawerRange.addEventListener("input", () => {
  cancelDrawerSpring();
  const now = performance.now();
  const nextPosition = Number(drawerRange.value);
  const nextVelocity = (nextPosition - drawerPosition) / Math.max((now - lastInputTime) / 1000, 0.016);
  lastInputTime = now;
  drawerTarget = nextPosition > -120 ? 0 : -240;
  drawerToggle.textContent = drawerTarget === 0 ? "Close drawer" : "Open drawer";
  setDrawerPosition(nextPosition, nextVelocity);
});
drawerRange.addEventListener("pointerdown", () => {
  cancelDrawerSpring();
  lastInputTime = performance.now();
});
drawerRange.addEventListener("change", () => settleDrawer());
drawerToggle.addEventListener("click", () => {
  settleDrawer(drawerTarget === 0 ? -240 : 0);
});

async function saveSettings() {
  if (saveButton.disabled) return;
  saveButton.disabled = true;
  saveStatus.dataset.state = "saving";
  saveStatus.textContent = "Saving settings.";
  await new Promise((resolve) => window.setTimeout(resolve, 160));
  saveStatus.dataset.state = "saved";
  saveStatus.textContent = "Settings saved.";
  saveButton.disabled = false;
}

saveButton.addEventListener("click", saveSettings);
setDrawerPosition(drawerPosition);
</script>

`springTo` 接收松手瞬间的 releaseVelocity，并把它作为积分器初始速度，因此新的拖拽、反向操作或路由离开都能立即接管旧动画。系统减弱动效偏好通过 change 事件立即落在目标位置，并在完成与取消时清理监听；保存提示使用短时 ease-out，文案和状态仍由同一业务状态驱动，方便用户读到完成结果后继续操作。