Skip to content

Commit b9328a5

Browse files
authored
docs: more details on transition migration
1 parent 4b98f78 commit b9328a5

File tree

1 file changed

+12
-1
lines changed

1 file changed

+12
-1
lines changed

documentation/docs/05-misc/04-v4-migration-guide.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,18 @@ The migration script will do both automatically for you. ([#8512](https://github
121121

122122
## Transitions are local by default
123123

124-
Transitions are now local by default to prevent confusion around page navigations. To make them global, add the `|global` modifier. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
124+
Transitions are now local by default to prevent confusion around page navigations. "local" means that a transition will not play if it's within a nested control flow block (`each/if/await/key`) and not the direct parent block but a block above it is created/destroyed. In the following example, the `slide` intro animation will only play when `success` goes from `false` to `true`, but it will _not_ play when `show` goes from `false` to `true`:
125+
126+
```svelte
127+
{#if show}
128+
...
129+
{#if success}
130+
<p in:slide>Success</p>
131+
{/each}
132+
{/if}
133+
```
134+
135+
To make transitions global, add the `|global` modifier - then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
125136

126137
## Default slot bindings
127138

0 commit comments

Comments
 (0)