]>
Commit | Line | Data |
---|---|---|
1 | import { sineOut } from 'svelte/easing'; | |
2 | import type { AnimationConfig } from 'svelte/animate'; | |
3 | ||
4 | export const blink = function blink(node: HTMLElement, params: AnimationConfig): AnimationConfig{ | |
5 | ||
6 | const originalWidth = parseFloat(getComputedStyle(node).width); | |
7 | const originalHeight = parseFloat(getComputedStyle(node).height); | |
8 | ||
9 | return { | |
10 | delay: params.delay || 0, | |
11 | duration: params.duration || 400, | |
12 | easing: params.easing || sineOut, | |
13 | css: (t: number): string => { | |
14 | ||
15 | const halfWidth = originalWidth / 2; | |
16 | const halfHeight = originalHeight / 2; | |
17 | const height = Math.round(t <= 0.2 ? (originalHeight * t) / 0.2 : originalHeight); | |
18 | const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0); | |
19 | const width = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0); | |
20 | const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth); | |
21 | ||
22 | return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`; | |
23 | } | |
24 | }; | |
25 | }; |