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 You can interact with this component via your
browser's console - try running the following: 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. editor on this page.
--> -->

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

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