mirror of https://github.com/sveltejs/svelte
parent
bacf2ccc35
commit
d67accba98
@ -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…
Reference in new issue