Lab

Each button answers into the stage below with the transition lab, which names only the stage. The lifecycle panel shows what happened; slow motion makes the overlaps easy to see.

• Two in a row A second answer arrives while the first one animates. The first is cut short (its finished comes early), the second keeps its classes. The engine phlo.js removes them when the first one ends, so the second falls back to a crossfade; the panel would say classes lost.
• Stream, transition first Two lines in one stream: the first starts a transition and brings an empty slot, the second fills the slot. The second runs before the update of the first, finds no slot and is lost. A known limit: put trans on the last line, or on a line that stands alone.
• Stream, transition last Progress lines without a transition, then one final line with it. This works.
• Late answer A second, non-blocking request answers 400 ms later and writes into the new stage while it is still animating; the new snapshot is live, so the text simply appears. In a background tab Chrome postpones the update of the transition, the late answer arrives first and lands in the old stage: the same race as the stream above.
• Duplicate names Two elements get the same view-transition-name. The browser refuses the transition with an InvalidStateError and only swaps the content.
• A hook that throws app.trans.broken throws. Each hook runs in a microtask of its own, so the transition, the logger and the rest of the page carry on; the error shows in the panel and the console.
• Hidden tab Answers after 3 s. Switch to another tab before then: phlo.js starts no transition for a hidden page.