diff --git a/src/components/card-detail/CardDetailModal.tsx b/src/components/card-detail/CardDetailModal.tsx index dce86db..6e1d0b4 100644 --- a/src/components/card-detail/CardDetailModal.tsx +++ b/src/components/card-detail/CardDetailModal.tsx @@ -1,5 +1,5 @@ import { useState, useEffect, useRef } from "react"; -import { AnimatePresence, motion } from "framer-motion"; +import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; import { X } from "lucide-react"; import { useBoardStore } from "@/stores/board-store"; @@ -25,6 +25,8 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) { const updateCard = useBoardStore((s) => s.updateCard); const open = cardId != null && card != null; + const prefersReducedMotion = useReducedMotion(); + const instant = { duration: 0 }; return ( @@ -36,7 +38,7 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} - transition={{ duration: 0.2 }} + transition={prefersReducedMotion ? instant : { duration: 0.2 }} onClick={onClose} /> @@ -46,9 +48,12 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) { onClick={onClose} > e.stopPropagation()} >