title: Misconception regarding svelte transitions
body: <p>I tried to use the help from this repl here (<a href="https://svelte.dev/tutorial/in-and-out" rel="nofollow noreferrer">https://svelte.dev/tutorial/in-and-out</a>) to make some divs fly in and fade out. Yet I think I have a little misunderstanding in my head...</p>
  <p>I created a component that looks like this:</p>
  <pre><code>&lt;script&gt;
    import { fade, fly } from &quot;svelte/transition&quot;;
  
    let steps = [
      { text: &quot;these&quot; },
      { text: &quot;are&quot; },
      { text: &quot;the&quot; },
      { text: &quot;instructions&quot; },
    ];
  
    function showNext() {
      if (currentStep === steps.length - 1) {
        return;
      }
      currentStep++;
    }
  
    function showPrev() {
      if (currentStep === 0) {
        return;
      }
      currentStep--;
    }
  
  
  &lt;/script&gt;
  
  &lt;div
    class=&quot;h-36 flex items-center justify-center text-xl w-32 mx-auto&quot;
    in:fly={{ y: 200, duration: 2000 }}
    out:fade
  &gt;
    {steps[currentStep].text}
  &lt;/div&gt;
  
  &lt;button on:click={showPrev}&gt;Back&lt;/button&gt;
  &lt;button on:click={showNext}&gt;Next&lt;/button&gt;
  
  </code></pre>
  <p>And I'd like to fly in and fade out the <code>div</code> with the content each time the <code>Back</code>or <code>Next</code>Button is clicked. But it doesn't fly in neither fades out. I guess this is just because I'm changing the html content in the div right? If so, what would be a good option to fly in and fade out each of the objects in <code>steps</code> ?</p>