<script>
import { slide } from 'svelte/transition';
let visible = true;
function fadeSlide(node, options) {
const slideTrans = slide(node, options)
return {
duration: options.duration,
css: t => `
${slideTrans.css(t)}
opacity: ${t};
`
};
}
</script>
<label>
<input type="checkbox" bind:checked={visible} />
visible
</label>
{#if visible}
<div class="center" transition:fadeSlide="{{duration: 1000}}">
<div class="box" />
</div>
{/if}
<style>
:global(body) {
padding: 0;
}
label {
position: absolute;
top: 1rem;