Skip to content

Instantly share code, notes, and snippets.

@breadthe
Last active January 6, 2021 14:22
Show Gist options
  • Save breadthe/533a4780607972e2ff5d915e22226a3d to your computer and use it in GitHub Desktop.
Save breadthe/533a4780607972e2ff5d915e22226a3d to your computer and use it in GitHub Desktop.
Svelte Summit 2020 | Tan Li Hau | Demystifying Svelte Transitions
<!-- Based on Demystifying Svelte Transitions (Tan Li Hau) Svelte Summit 2020 -->
<script>
function customTransition(node) {
let originalText = node.textContent;
return {
delay: 0,
duration: 1000,
css: (t, u) => {
if (t < 0.4) return `font-weight: 500; color: maroon;`;
if (t < 0.8) return `font-style: italic;`;
},
tick: (t, u) => {
if (t < 0.4) node.textcontent = 'Coming in...';
else node.textContent = originalText;
},
}
}
let count = 0;
setInterval(() => {
count++;
}, 1000);
</script>
{#key count}
<div in:customTransition>
{count}
</div>
{/key}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment