demo · v144
Cancel or Finish
A real use case: defer a transition's end until an image finishes decoding, with a timeout fallback that cancels the transition if the image is too slow. Skip-on-timeout was the explicit motivation in the spec PR.
waitUntil method: checking…
photo A
the API
const t = document.startViewTransition(() => swapPhoto());
const decode = img.decode();
const timeout = new Promise((_, rej) =>
setTimeout(() => rej(new Error("decode timeout")), 1500));
t.waitUntil(Promise.race([decode, timeout]).catch(() => t.skipTransition()));
await t.finished;