<script>
import { fade, slide } from 'svelte/transition';
import { tick, afterUpdate, beforeUpdate, onMount } from "svelte"
let visibleDoubleElements = false;
let visibleCSSTransition = false
let activeClass = false
</script>
<!-- Workaround with tranitions on two nested html elements -->
<label>
<input type="checkbox" bind:checked={visibleDoubleElements}>
Svelte transition using two html elements
</label>
{#if visibleDoubleElements === true}
<span transition:fade>
<input transition:slide type="text" placeholder="Double elements" />
</span>
{/if}
<hr/>
<!-- Working example 2. But here here the element is never removed from the DOM. -->
<label>
<input type="checkbox" bind:checked={visibleCSSTransition}>
Transition by toggling css-class never create and destroy the element
</label>
<input type="text" class="startHidden" placeholder="CSS transition" class:activeClass={visibleCSSTransition === true}>