another animation improve

src/trash/trash-components.jsx

@@ -126,7 +126,7 @@ export const DatePicker = (props) => {
   const layoutGroupId = useId();
 
   return (
-    <div
+    <motion.div
       className={`flex items-center justify-between px-2 py-1 w-full bg-grain ${
         !props.pink ? "border-zinc-800/40" : "border-pink-500/20"
       } border rounded-2xl relative`}
@@ -140,19 +140,21 @@ export const DatePicker = (props) => {
         <AnimatePresence mode="wait">
           <motion.span
             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
                 ? "lg:hover:bg-white lg:hover:*:text-black"
                 : "lg:hover:bg-pink-500 lg:hover:*:text-white"
             } px-3 overflow-hidden `}
             variants={{
-              a: { opacity: 0 },
+              a: { opacity: 0.3 },
               b: { opacity: 1 },
             }}
             initial="a"
             animate="b"
-            transition={{ duration: 0.2 }}
+            transition={{ duration: 0.1 }}
             exit="a"
+            layoutRoot
+            layout="position"
             onClick={() => {
               if (apiFormatDate(props.date) != apiFormatDate(new Date()))
                 trigger([
@@ -197,7 +199,9 @@ export const DatePicker = (props) => {
                 </motion.div>
                 <motion.span
                   initial={{ opacity: 0 }}
-                  transition={{ delay: 0.1 }}
+                  transition={{ delay: 0.05 }}
+                  layoutId="datepicker_date_if"
+                  layout="position"
                   animate={{ opacity: 1 }}
                   className="text-zinc-600 italic"
                 >
@@ -214,7 +218,7 @@ export const DatePicker = (props) => {
         setDate={props.setDate}
         pink={props.pink}
       />
-    </div>
+    </motion.div>
   );
 };