feat(settings/user/birthday): intro and outro animation

app/components/Settings/BottomScreen/Menus/User/Birthday.vue

@@ -8,7 +8,32 @@ const BIRTHDAY_DAY = 25;
 const BIRTHDAY_MONTH = 4;
 const BIRTHDAY_YEAR = 2002;
 
-const handleActivateB = () => {
+const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
+const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
+const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
+
+const animateIntro = async () => {
+  await Promise.all([
+    monthRef.value?.animateIntro(),
+    dayRef.value?.animateIntro(),
+    yearRef.value?.animateIntro(),
+  ]);
+};
+
+const animateOutro = async () => {
+  await Promise.all([
+    monthRef.value?.animateOutro(),
+    dayRef.value?.animateOutro(),
+    yearRef.value?.animateOutro(),
+  ]);
+};
+
+onMounted(() => {
+  animateIntro();
+});
+
+const handleActivateB = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
@@ -42,7 +67,10 @@ const handleActivateA = () => {
 
   confirmationModal.open({
     text,
-    onClosed: () => store.closeSubMenu(),
+    onClosed: async () => {
+      await animateOutro();
+      store.closeSubMenu();
+    },
     timeout: 2000,
   });
 };
@@ -53,18 +81,21 @@ defineOptions({ render: () => null });
 <template>
   <!-- date format may change based on the language (d/m/y is superior btw) -->
   <NumberInput
+    ref="month"
     :model-value="BIRTHDAY_MONTH"
     :title="$t('settings.user.birthday.month')"
     :x="1 * 16"
     :disabled="true"
   />
   <NumberInput
+    ref="day"
     :model-value="BIRTHDAY_DAY"
     :title="$t('settings.user.birthday.day')"
     :x="5 * 16"
     :disabled="true"
   />
   <NumberInput
+    ref="year"
     :model-value="BIRTHDAY_YEAR"
     :title="$t('settings.user.birthday.year')"
     :digits="4"