katamaz/dx4
0
0
Fork 0
Code Issues Actions Projects Activity

another animation improve

Browse Source
This commit is contained in:
katamaz
2026-08-31 12:37:08 +03:00
parent f68311277b
commit 57f0487f65
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trash/trash-components.jsx
+10 -6
View File
@@ -126,7 +126,7 @@ export const DatePicker = (props) => {
const layoutGroupId = useId(); const layoutGroupId = useId();
return ( return (
<div <motion.div
className={`flex items-center justify-between px-2 py-1 w-full bg-grain ${ className={`flex items-center justify-between px-2 py-1 w-full bg-grain ${
!props.pink ? "border-zinc-800/40" : "border-pink-500/20" !props.pink ? "border-zinc-800/40" : "border-pink-500/20"
} border rounded-2xl relative`} } border rounded-2xl relative`}
@@ -140,19 +140,21 @@ export const DatePicker = (props) => {
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.span <motion.span
key={formatDate(props.date)} key={formatDate(props.date)}
className={`cursor-pointer flex items-center z gap-1 justify-center w-[80%] lg:hover:text-black *:transition-colors transition-colors p-1 rounded-3xl text-zinc-300 ${ className={`cursor-pointer flex relative items-center z gap-1 justify-center w-[80%] lg:hover:text-black *:transition-colors transition-colors p-1 rounded-3xl text-zinc-300 ${
!props.pink !props.pink
? "lg:hover:bg-white lg:hover:*:text-black" ? "lg:hover:bg-white lg:hover:*:text-black"
: "lg:hover:bg-pink-500 lg:hover:*:text-white" : "lg:hover:bg-pink-500 lg:hover:*:text-white"
} px-3 overflow-hidden `} } px-3 overflow-hidden `}
variants={{ variants={{
a: { opacity: 0 }, a: { opacity: 0.3 },
b: { opacity: 1 }, b: { opacity: 1 },
}} }}
initial="a" initial="a"
animate="b" animate="b"
transition={{ duration: 0.2 }} transition={{ duration: 0.1 }}
exit="a" exit="a"
layoutRoot
layout="position"
onClick={() => { onClick={() => {
if (apiFormatDate(props.date) != apiFormatDate(new Date())) if (apiFormatDate(props.date) != apiFormatDate(new Date()))
trigger([ trigger([
@@ -197,7 +199,9 @@ export const DatePicker = (props) => {
</motion.div> </motion.div>
<motion.span <motion.span
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
transition={{ delay: 0.1 }} transition={{ delay: 0.05 }}
layoutId="datepicker_date_if"
layout="position"
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
className="text-zinc-600 italic" className="text-zinc-600 italic"
> >
@@ -214,7 +218,7 @@ export const DatePicker = (props) => {
setDate={props.setDate} setDate={props.setDate}
pink={props.pink} pink={props.pink}
/> />
</div> </motion.div>
); );
}; };