feat(FontListItem): delete springs to imrove performance
This commit is contained in:
@@ -1,11 +1,6 @@
|
|||||||
<!--
|
|
||||||
Component: FontListItem
|
|
||||||
Displays a font item and manages its animations
|
|
||||||
-->
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||||
import type { Snippet } from 'svelte';
|
import type { Snippet } from 'svelte';
|
||||||
import { Spring } from 'svelte/motion';
|
|
||||||
import { type UnifiedFont } from '../../model';
|
import { type UnifiedFont } from '../../model';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -31,51 +26,14 @@ interface Props {
|
|||||||
children: Snippet<[font: UnifiedFont]>;
|
children: Snippet<[font: UnifiedFont]>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { font, isFullyVisible, isPartiallyVisible, proximity, children }: Props = $props();
|
const { font, children }: Props = $props();
|
||||||
|
|
||||||
let timeoutId = $state<NodeJS.Timeout | null>(null);
|
|
||||||
|
|
||||||
// Create a spring for smooth scale animation
|
|
||||||
const scale = new Spring(1, {
|
|
||||||
stiffness: 0.3,
|
|
||||||
damping: 0.7,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Springs react to the virtualizer's computed state
|
|
||||||
const bloom = new Spring(0, {
|
|
||||||
stiffness: 0.15,
|
|
||||||
damping: 0.6,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sync spring to proximity for a "Lens" effect
|
|
||||||
$effect(() => {
|
|
||||||
bloom.target = isPartiallyVisible ? 1 : 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
return () => {
|
|
||||||
if (timeoutId) {
|
|
||||||
clearTimeout(timeoutId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
function animateSelection() {
|
|
||||||
scale.target = 0.98;
|
|
||||||
|
|
||||||
timeoutId = setTimeout(() => {
|
|
||||||
scale.target = 1;
|
|
||||||
}, 150);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={cn('pb-1 will-change-transform')}
|
class={cn(
|
||||||
style:opacity={bloom.current}
|
'pb-1 will-change-transform transition-transform duration-200 ease-out',
|
||||||
style:transform="
|
'hover:scale-[0.98]', // Simple CSS hover effect
|
||||||
scale({0.92 + (bloom.current * 0.08)})
|
)}
|
||||||
translateY({(1 - bloom.current) * 10}px)
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{@render children?.(font)}
|
{@render children?.(font)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user