feat(settings/clock/date): intro and outro animation

app/components/Settings/BottomScreen/Menus/Clock/Date.vue

@@ -12,11 +12,37 @@ useIntervalFn(() => {
   now.value = new Date();
 }, 1000);
 
-const handleCancel = () => {
+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 handleCancel = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = () => {
+const handleConfirm = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
@@ -29,18 +55,21 @@ defineOptions({ render: () => null });
 
 <template>
   <NumberInput
+    ref="month"
     :model-value="now.getMonth() + 1"
     :title="$t('settings.clock.date.month')"
     :x="1 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
+    ref="day"
     :model-value="now.getDate()"
     :title="$t('settings.clock.date.day')"
     :x="5 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
+    ref="year"
     :model-value="now.getFullYear()"
     :title="$t('settings.clock.date.year')"
     :digits="4"