]>
Commit | Line | Data |
---|---|---|
6347b8d9 | 1 | import { sineOut } from 'svelte/easing'; |
a7cf03c1 | 2 | import type { AnimationConfig } from 'svelte/animate'; |
6347b8d9 | 3 | |
a7cf03c1 | 4 | export const blink = function blink(node: HTMLElement, params: AnimationConfig): AnimationConfig{ |
6347b8d9 RBR |
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, | |
a7cf03c1 | 13 | css: (t: number): string => { |
6347b8d9 RBR |
14 | |
15 | const halfWidth = originalWidth / 2; | |
16 | const halfHeight = originalHeight / 2; | |
8ae7249a RBR |
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); | |
6347b8d9 RBR |
21 | |
22 | return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`; | |
23 | } | |
24 | }; | |
25 | }; |