glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ComparisonSlider): add appearance animation to the slider line

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-10 18:14:43 +03:00
parent 1c2fca784f
commit e1117667d2
1 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
View File

@@ -4,6 +4,8 @@
--> -->
<script lang="ts"> <script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { cubicOut } from 'svelte/easing';
import { fade } from 'svelte/transition';
interface Props { interface Props {
/** /**
@@ -27,6 +29,7 @@ let { sliderPos, isDragging }: Props = $props();
)} )}
style:left="{sliderPos}%" style:left="{sliderPos}%"
style:will-change={isDragging ? 'left' : 'auto'} style:will-change={isDragging ? 'left' : 'auto'}
in:fade={{ duration: 300, delay: 150, easing: cubicOut }}
> >
<!-- We use part of lucide cursor svg icon as a handle --> <!-- We use part of lucide cursor svg icon as a handle -->
<svg <svg