import * as transitionFunctions from 'svelte/transition'

import * as easingFunctions from 'svelte/easing'

const transitionNames = ["blur","fade","fly","scale","slide"]

let transitionName = 'scale'

let easingName = 'elasticInOut'

let duration = 1000

let delay = 0

let show = true

$: transition = transitionFunctions[transitionName]

$: easing = easingFunctions[easingName]

</script>

<header>

<h1>Svelte transition visualizer</h1>

<p>Select options, then click <strong>toggle</strong> to trigger the animation.</p>

<div class="actions">

<div>

<label>

<span>Transition style</span>

<select bind:value={transitionName}>

{#each transitionNames as transitionName}

<option>{transitionName}</option>

{/each}

</select>

</label>

<label>

<span>Easing function</span>

<select bind:value={easingName}>

{#each Object.keys(easingFunctions) as easingName}

<option>{easingName}</option>