]>
Commit | Line | Data |
---|---|---|
1 | import { sineOut } from 'svelte/easing'; | |
2 | ||
3 | export const blink = function blink(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 height = Math.round(t <= 0.2 ? (originalHeight * t) / 0.2 : originalHeight); | |
17 | const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0); | |
18 | const width = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0); | |
19 | const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth); | |
20 | ||
21 | return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`; | |
22 | } | |
23 | }; | |
24 | }; |