mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
17 lines
470 B
17 lines
470 B
3 years ago
|
---
|
||
|
|
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.
|