Open code, practice, and notes →
Download source with English comments · for reading
Svelte · 24 Checking Lifetimes During Transitions
Series contents · Technology map
Stage: Canvas Verification and Framework Comparison · External example · preview instructions · Storage ID: svelte-step-24
Goals and learning outcomes
- The A draft remains at both duration values.
- There are 0 active timers after the final hide.
Prerequisites
Unit 24 continues with the work and experiment records from Unit 23.
Key concepts and explanations
Transitions
A transition applies visual changes when an element appears or disappears. Distinguish the time it visually disappears from the time data changes.
Motion Preference
Respecting reduced-motion preferences lets users access essential functions without motion. Do not use the end of a transition as a condition for saving to be complete.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Compile and run .svelte files in a separate Svelte 5 Vite project. Record package versions and the lockfile. Frontory’s Svelte preview uses actual writable stores and an explicit DOM adapter; it is not a .svelte compiler or a runes runner.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Add a fade transition to src/EditorPanel.svelte.
- Set duration to 0 under reduced-motion conditions.
- Quickly repeat showing and hiding, and record DOM/resource cleanup timing and note preservation.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| duration | 300ms | 0ms | Functionality and drafts stay the same; only the visual transition time changes. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- The A draft remains at both duration values.
- There are 0 active timers after the final hide.
Self-check
- Can an element remain during an exit transition?
- Can you assume that cleanup logs and visual disappearance happen at the same time?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
The preview is a Svelte writable/DOM contract experiment. To run runes, snippets, and compiled output, run the actual App.svelte in a Svelte 5 project.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Style Scope and Accessibility · Next: Observing Compilation Output and Performance