Svelte Summit 2020 | Tan Li Hau | Demystifying Svelte Transitions

CustomTransition.svelte

<!-- 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}