From 011b33181ee566c1566082dc645da2bb5e412f7e Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 14 May 2019 23:59:07 -0400 Subject: [PATCH] site: fix immutable tutorial and example on Firefox (#2601) --- .../20-miscellaneous/02-immutable-data/flash.js | 16 +++++++++------- .../07-svelte-options/app-a/flash.js | 16 +++++++++------- .../07-svelte-options/app-b/flash.js | 16 +++++++++------- 3 files changed, 27 insertions(+), 21 deletions(-) diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/flash.js b/site/content/examples/20-miscellaneous/02-immutable-data/flash.js index 8dff9cbe2f..c788cc6d35 100644 --- a/site/content/examples/20-miscellaneous/02-immutable-data/flash.js +++ b/site/content/examples/20-miscellaneous/02-immutable-data/flash.js @@ -1,11 +1,13 @@ export default function flash(element) { - element.style.transition = 'none'; - element.style.color = 'rgba(255,62,0,1)'; - element.style.backgroundColor = 'rgba(255,62,0,0.2)'; + requestAnimationFrame(() => { + element.style.transition = 'none'; + element.style.color = 'rgba(255,62,0,1)'; + element.style.backgroundColor = 'rgba(255,62,0,0.2)'; - setTimeout(() => { - element.style.transition = 'color 1s, background 1s'; - element.style.color = ''; - element.style.backgroundColor = ''; + setTimeout(() => { + element.style.transition = 'color 1s, background 1s'; + element.style.color = ''; + element.style.backgroundColor = ''; + }); }); } \ No newline at end of file diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js index 8dff9cbe2f..c788cc6d35 100644 --- a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js +++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js @@ -1,11 +1,13 @@ export default function flash(element) { - element.style.transition = 'none'; - element.style.color = 'rgba(255,62,0,1)'; - element.style.backgroundColor = 'rgba(255,62,0,0.2)'; + requestAnimationFrame(() => { + element.style.transition = 'none'; + element.style.color = 'rgba(255,62,0,1)'; + element.style.backgroundColor = 'rgba(255,62,0,0.2)'; - setTimeout(() => { - element.style.transition = 'color 1s, background 1s'; - element.style.color = ''; - element.style.backgroundColor = ''; + setTimeout(() => { + element.style.transition = 'color 1s, background 1s'; + element.style.color = ''; + element.style.backgroundColor = ''; + }); }); } \ No newline at end of file diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js index 8dff9cbe2f..c788cc6d35 100644 --- a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js +++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js @@ -1,11 +1,13 @@ export default function flash(element) { - element.style.transition = 'none'; - element.style.color = 'rgba(255,62,0,1)'; - element.style.backgroundColor = 'rgba(255,62,0,0.2)'; + requestAnimationFrame(() => { + element.style.transition = 'none'; + element.style.color = 'rgba(255,62,0,1)'; + element.style.backgroundColor = 'rgba(255,62,0,0.2)'; - setTimeout(() => { - element.style.transition = 'color 1s, background 1s'; - element.style.color = ''; - element.style.backgroundColor = ''; + setTimeout(() => { + element.style.transition = 'color 1s, background 1s'; + element.style.color = ''; + element.style.backgroundColor = ''; + }); }); } \ No newline at end of file