Kevin-Mok/kanban
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add transition when dragging between days on mobile

Browse Source
This commit is contained in:
Kevin Mok
2025-03-28 14:13:26 -04:00
parent 8f18c85500
commit b447bb1cbe
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Calendar.tsx
View File

@@ -178,7 +178,7 @@ const Calendar = () => {
const newDate = addDays(prev, direction === 'left' ? -1 : 1); const newDate = addDays(prev, direction === 'left' ? -1 : 1);
setIsEventDragging(false); setIsEventDragging(false);
setOffset(direction === 'left' ? -window.innerWidth : window.innerWidth); setOffset(direction === 'left' ? -window.innerWidth : window.innerWidth);
setTimeout(() => setOffset(0), 10); setTimeout(() => setOffset(0), 500);
return newDate; return newDate;
}); });
}, []); }, []);
@@ -208,12 +208,13 @@ const Calendar = () => {
const mobileViewStyle = { const mobileViewStyle = {
x: offset - (isClient ? (containerRef.current?.offsetWidth || window.innerWidth) : 0), x: offset - (isClient ? (containerRef.current?.offsetWidth || window.innerWidth) : 0),
width: '300%', width: '300%',
transition: isSwiping ? 'none' : 'transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)' transition: isSwiping ? 'none' : 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
}; };
const motionDivStyle = { const motionDivStyle = {
opacity: 1 - Math.abs(offset)/(isClient ? (containerRef.current?.offsetWidth || 1) * 0.5 : 1), opacity: 1 - Math.abs(offset)/(isClient ? (containerRef.current?.offsetWidth || 1) * 0.5 : 1),
scale: 1 - Math.abs(offset)/(isClient ? (containerRef.current?.offsetWidth || 1) * 2 : 1), scale: 1 - Math.abs(offset)/(isClient ? (containerRef.current?.offsetWidth || 1) * 2 : 1),
transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
}; };
const handleEventClick = useCallback(({ event, date }: { event: Event; date: string }) => { const handleEventClick = useCallback(({ event, date }: { event: Event; date: string }) => {