mirror of https://github.com/sveltejs/svelte
[docs] Add tutorial step for key blocks (#6420)
parent
384513e3b1
commit
854a7de451
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
let number = 0;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
The number is:
|
||||
<span style="display: inline-block" in:fly={{ y: -20 }}>
|
||||
{number}
|
||||
</span>
|
||||
</div>
|
||||
<br />
|
||||
<button
|
||||
on:click={() => {
|
||||
number += 1;
|
||||
}}>
|
||||
Increment
|
||||
</button>
|
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
let number = 0;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
The number is:
|
||||
{#key number}
|
||||
<span style="display: inline-block" in:fly={{ y: -20 }}>
|
||||
{number}
|
||||
</span>
|
||||
{/key}
|
||||
</div>
|
||||
<br />
|
||||
<button
|
||||
on:click={() => {
|
||||
number += 1;
|
||||
}}>
|
||||
Increment
|
||||
</button>
|
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Key blocks
|
||||
---
|
||||
|
||||
Key blocks destroy and recreate their contents when the value of an expression changes.
|
||||
|
||||
```html
|
||||
{#key value}
|
||||
<div transition:fade>{value}</div>
|
||||
{/key}
|
||||
```
|
||||
|
||||
This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
|
||||
|
||||
Wrap the `<span>` element in a key block depending on `number`. This will make the
|
||||
animation play whenever you press the increment button.
|
Loading…
Reference in new issue