]>
Commit | Line | Data |
---|---|---|
1 | import { sineOut } from 'svelte/easing'; | |
2 | ||
3 | export const blink = function whoosh(node, params) { | |
4 | ||
5 | const originalWidth = parseFloat(getComputedStyle(node).width); | |
6 | const originalHeight = parseFloat(getComputedStyle(node).height); | |
7 | ||
8 | return { | |
9 | delay: params.delay || 0, | |
10 | duration: params.duration || 400, | |
11 | easing: params.easing || sineOut, | |
12 | css: (t, u) => { | |
13 | ||
14 | const halfWidth = originalWidth / 2; | |
15 | const halfHeight = originalHeight / 2; | |
16 | // const padding = t < 0.8 ? halfWidth * (1 - t) / 0.8 : halfWidth / 2 + 1; | |
17 | const height = t <= 0.2 ? (originalHeight * t / 0.2) : originalHeight; | |
18 | const marginY = t <= 0.2 ? (halfHeight * (1 - t / 0.2)) : 0; | |
19 | const width = t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0; | |
20 | const marginX = 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 | }; |