You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.1 KiB
55 lines
1.1 KiB
<script lang="ts" context="module">
|
|
export type NailState = {
|
|
angle: number;
|
|
length: number;
|
|
visible: boolean;
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
import { DIAL } from "./Dial.svelte";
|
|
import { writable } from "svelte/store";
|
|
import { elasticOut, elasticIn } from "svelte/easing";
|
|
|
|
const state = writable<NailState>({
|
|
angle: 0,
|
|
length: 0,
|
|
visible: false,
|
|
});
|
|
|
|
function slide(node: any, { delay = 0, duration = 1000 }) {
|
|
return {
|
|
delay,
|
|
easing: elasticOut,
|
|
duration,
|
|
css: (t: number) =>
|
|
`transform: rotate(${$state.angle}deg) translateX(${
|
|
t * $state.length
|
|
}px) scale(${t}); opacity: ${t}`,
|
|
};
|
|
}
|
|
|
|
const ctx: any = getContext(DIAL);
|
|
if (ctx) ctx.registerNail(state);
|
|
</script>
|
|
|
|
{#if $state.visible}
|
|
<div
|
|
transition:slide
|
|
style="transform: rotate({$state.angle}deg) translateX({$state.length}px);"
|
|
class="rel"
|
|
>
|
|
<div style="transform: rotate({-$state.angle}deg)" class="abs">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.rel {
|
|
}
|
|
|
|
.abs {
|
|
}
|
|
</style>
|
|
|