<script context="module">
import * as easing from 'svelte/easing';
import * as transitions from './transitions';
import TransitionForm from './TransitionForm.svelte';
import LoremIpsum, { typeValues } from './LoremIpsum.svelte';
import Button from './Button.svelte';
import { writable } from 'svelte/store';
import { outTransitionValues, inTransitionValues, controls } from './stores';
import Select from './Select.svelte';
const transitionOptions = Object.keys(transitions);
const easingOptions = Object.keys(easing);
</script>
<script>
const handleShowButtonClick = () => {
$controls.on = !$controls.on;
};
$: showButtonLabelMessage = $controls.on ? 'show out transition' : 'show in transition';
$: inTransition = transitions[$inTransitionValues.transitionName];
$: outTransition = transitions[$outTransitionValues.transitionName];
$: intransitionOptions = {
duration: $inTransitionValues.transitionDuration,
easing: easing[$inTransitionValues.easingName]
};
$: outTransitionOptions = {
duration: $outTransitionValues.transitionDuration,
easing: easing[$outTransitionValues.easingName]
};
</script>
<style>
.transition {
display: inline-block;