Here is my code
<AnimatePresence>
{state.deleteMultipleDiscounts.length !== 0 && (
<motion.div
key="motionDiv"
initial={{ opacity: 0, translateY: -10 }}
animate={{ opacity: 1, translateY: 0 }}
exit={{ opacity: 0, translateY: -10 }}
transition={{ duration: 0.1, ease: "easeOut" }}
className="dark:bg-gray-800 bg-gray-300 w-full mt-3 rounded-md py-4 px-5 flex flex-col md:flex-row space-x-[15px] space-y-[10px] md:space-y-0 items-start items-center"
>
<span className="text-black dark:text-white">{state.deleteMultipleDiscounts.length} {state.deleteMultipleDiscounts.length === 1 ? "Item" : "Items"} selected</span>
<motion.button
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
type="submit"
onClick={deleteSelected}
className="flex flex-row w-full md:w-auto text-[12px] text-start text-black dark:text-white font-bold py-2 px-2 rounded focus:outline-none focus:shadow-outline bg-gray-500 hover:bg-gray-400 dark:bg-gray-700/75 dark:hover:bg-gray-600/75 transition-colors duration-500"
>
{state.deletingMultipleDiscounts ? (
<>
<ImSpinner8 className="animate-spin mt-[2.5px]" />
<span className="ml-1">Deleting...</span>
</>
) : (
<>
<FaRegTrashCan className='mt-[2.5px]' />
<span className="ml-1">Delete Selected</span>
</>
)}
</motion.button>
<motion.button
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
type="button"
onClick={selectAll}
className="flex flex-row w-full md:w-auto text-[12px] text-start text-black dark:text-white font-bold py-2 px-2 rounded focus:outline-none focus:shadow-outline bg-gray-500 hover:bg-gray-400 dark:bg-gray-700/75 dark:hover:bg-gray-600/75 transition-colors duration-500"
>
<MdKeyboardDoubleArrowUp className='mt-[1px] text-[15px]' />
<span className="ml-[1px]">Select All</span>
</motion.button>
<motion.button
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
type="button"
onClick={deselectAll}
className="flex flex-row w-full md:w-auto text-[12px] text-start text-black dark:text-white font-bold py-2 px-2 rounded focus:outline-none focus:shadow-outline bg-gray-500 hover:bg-gray-400 dark:bg-gray-700/75 dark:hover:bg-gray-600/75 transition-colors duration-500"
>
<MdKeyboardDoubleArrowDown className='mt-[2px] text-[15px]' />
<span className="ml-[1px]">Deselect All</span>
</motion.button>
</motion.div>
)}
</AnimatePresence>
<div className="relative mt-5 overflow-y-auto rounded-md">
{/* max-h-[304px] */}
<div className="overflow-x-auto h-auto">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-gray-300 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
<input
type="checkbox"
id="checkboxAll"
name="checkboxAll"
onChange={handleSelectToggle}
className={`
mr-2 rounded-md border appearance-none focus:ring-offset-0 focus:ring-transparent peer outline-none focus:border-transparent bg-gray-400/50
`}
/>
<style jsx>{`#checkboxAll:checked { background-color: #7000fd; } `}</style>
</th>
<th scope="col" className="px-6 py-3">Code</th>
<th scope="col" className="px-6 py-3">Discount Amount</th>
<th scope="col" className="px-6 py-3">Limit</th>
<th scope="col" className="px-6 py-3">Expiry</th>
<th scope="col" className="px-6 py-3">Date Generated</th>
<th scope="col" className="px-6 py-3">⠀</th>
</tr>
</thead>
<tbody>
{state.fetchedDiscounts.map((discount: any, index: number) => (
<tr key={index} className="bg-gray-200 border-b dark:bg-gray-800 dark:border-gray-700">
<td className="px-6 py-4 whitespace-nowrap">
<input
type="checkbox"
id="checkboxSelect"
name="checkboxSelect"
onChange={(e) => handleSelectOne(e, discount.code)}
className={`
mr-2 rounded-md border appearance-none focus:ring-offset-0 focus:ring-transparent peer outline-none focus:border-transparent bg-gray-500
`}
/>
<style jsx>{`#checkboxSelect:checked { background-color: #7000fd; }`}</style>
</td>
<td className="px-6 py-4 whitespace-nowrap">{discount.code}</td>
<td className="px-6 py-4 whitespace-nowrap">
{discount.discount.includes('$') ? '$' + discount.discount.replace('$', '') : discount.discount + ''}
</td>
<td className="px-6 py-4 whitespace-nowrap">{discount.limit == -1 ? "Unlimited" : discount.limit}</td>
<td className="px-6 py-4 whitespace-nowrap">{discount.expiry} {discount.expiry == "Never" ? "" : "(y-m-d)"}</td>
<td className="px-6 py-4 whitespace-nowrap">{new Date(discount.date).toISOString().replace(/T/, ' ').replace(/..+/, '')}</td>
<td className="whitespace-nowrap">
<div className="relative">
<button className="px-3 mt-2" onClick={() => toggleContextMenu(index)}>
{state.contextMenuIndex === index ? (
<IoClose className="text-[18px]"/>
) : (
<RxDotsHorizontal />
)}
</button>
<AnimatePresence>
{state.contextMenuIndex === index && (
<>
<div
className="fixed top-0 left-0 w-full h-full"
onClick={() => toggleContextMenu(index)}
/>
<motion.div
initial={{ opacity: 0, translateY: 0 }}
animate={{ opacity: 1, translateY: 0 }}
exit={{ opacity: 0, translateY: 0 }}
transition={{ duration: 0.2, ease: "easeOut" }}
className="fixed right-[70px] z-10 w-[180px] bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 shadow-lg rounded-md"
>
<button
className="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 rounded-t-md transition-colors duration-400 w-full text-start"
onClick={(e) => { EditDiscountOpen(discount.code, e); toggleContextMenu(index) }}
>
Edit
</button>
{/* @ts-ignore */}
<Tooltip
title={"This action cannot be undone"}
position={"left"}
duration={300}
hideOnClick={true}
>
<button
className="block px-3 py-2 text-sm text-red-700 hover:bg-red-100 hover:text-red-900 dark:text-red-300 dark:hover:bg-red-700 rounded-b-md transition-colors duration-400 w-full text-start"
onClick={(e) => { DeleteDiscount(discount.code, e); toggleContextMenu(index) }}
>
Delete
</button>
</Tooltip>
</motion.div>
</>
)}
</AnimatePresence>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
When the framer motion div shows, it snaps my other divs, how can I make it not snap?
I’ve tried to animate the presence of the other divs, I’ve tried changing them to all motion divs, nothing has worked.
The opening animation or closing animation plays on the motion div, but then my div that is under it snaps into place, when the animation starts it snaps down, then when it closes it snaps into the place there, I want it to grow with the motion div.
New contributor
api is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.