partial fix

pull/1890/head
Rich Harris 7 years ago
parent bacf2ccc35
commit d67accba98

@ -7,8 +7,8 @@ below right to see the generated code.
You can interact with this component via your
browser's console - try running the following:
app.set({ name: 'everybody' });
app.name = 'everybody';
You can also update the data via the JSON
You can also update the data via the props
editor on this page.
-->

@ -1,19 +1,15 @@
<svelte:meta immutable/>
<script>
import { afterRender } from 'svelte';
import { afterUpdate } from 'svelte';
import flash from './flash.js';
export let todo;
let span;
afterRender(() => {
span.style.color = 'red';
setTimeout(() => {
span.style.color = 'black';
}, 400);
});
flash(() => span);
</script>
<!-- the text will flash red whenever
the `todo` object changes -->
<span ref:span>{todo.text}</span>
<span bind:this={span}>{todo.text}</span>

@ -1,17 +1,13 @@
<script>
import { afterRender } from 'svelte';
import { afterUpdate } from 'svelte';
import flash from './flash.js';
export let todo;
let span;
afterRender(() => {
span.style.color = 'red';
setTimeout(() => {
span.style.color = 'black';
}, 400);
});
flash(() => span);
</script>
<!-- the text will flash red whenever
the `todo` object changes -->
<span ref:span>{todo.text}</span>
<span bind:this={span}>{todo.text}</span>

@ -0,0 +1,13 @@
import { afterUpdate } from 'svelte';
export default function flash(fn) {
afterUpdate(() => {
const span = fn();
span.style.color = 'red';
setTimeout(() => {
span.style.color = 'black';
}, 400);
});
}
Loading…
Cancel
Save