title: How to use two svelte transitions on the same togglable element?
body: <p>I have an input field that I want to hide/show and doing so with a fade and slide transition. I've have two examples that I came up with but both have their drawbacks and I'd like to know if there is a more elegant solution.</p>
  <p><em>I just need one of the two questions to be answered as both of them would solve my problem.</em></p>
  <p><strong>Question 1:</strong> Is there a way to trigger multiple transitions for one transition-directive?</p>
  <p><strong>Question 2:</strong> How to add a class that will trigger an ordinary css-transition <em>after</em> an if-statement put the element in the DOM?</p>
  <p><strong>Example 1</strong></p>
  <p>Svelte does not allow two transitions on the same element. So one solution is to nest two elements as shown below. Is there instead a way to write a custom transition using both fade and slide <code>transition:myMultiTransition</code>?</p>
  <pre class="lang-html prettyprint-override"><code>{#if active === true}
    &lt;span transition:fade&gt;
      &lt;span transition:slide&gt;
        &lt;input type=&quot;text&quot; /&gt;
      &lt;/span&gt;
    &lt;/span&gt;
  {/if}
  </code></pre>
  <p><strong>Example 2</strong></p>
  <p>In my other solution I just toggle an active class using a normal css transitions. The problem here is that the <code>&lt;input&gt;</code>-field never leaves the DOM. It's 0px height but it seems wrong to leave it there.</p>
  <p>How to cuccessfully show the input field with an <code>{#if active === true}</code> and afterwards add a class that trigger the transition effect? Svelte seems to add the active-class that is supposed to trigger the transition before the element has entered the DOM.</p>
  <p>I've tried to use <code>await tick()</code>, <code>onMount</code>, <code>beforeUpdate</code> in various combination with no luck.</p>
  <p>When adding the class with a delay with setTimeout it works - but I don't like this solution because it could fail if not the timing is exact and I won't want a delay before the transition start.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;span class:{active}&gt;
     &lt;input type=&quot;text&quot; /&gt;
  &lt;/span&gt;
  
  &lt;style&gt;
    .active {
       // Normal transition: opacity 1s etc ... 
    }
  &lt;/style&gt;
  </code></pre>
  <p><strong>REPL</strong></p>
  <p><a href="https://svelte.dev/repl/89cb7d26d9484d0193b4bc6bf59518ef?version=3.38.3" rel="noreferrer">https://svelte.dev/repl/89cb7d26d9484d0193b4bc6bf59518ef?version=3.38.3</a></p>