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

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
 import { useIntervalFn } from "@vueuse/core";
+import gsap from "gsap";
 
 const store = useSettingsStore();
 const { assets } = useAssets();
@@ -12,17 +13,62 @@ useIntervalFn(() => {
   now.value = new Date();
 }, 1000);
 
-const handleCancel = () => {
+const SLIDE_OFFSET = 96;
+const SLIDE_DURATION = 0.25;
+
+const animation = reactive({
+  offsetY: SLIDE_OFFSET,
+  opacity: 0,
+});
+
+const hourRef = useTemplateRef<InstanceType<typeof NumberInput>>("hour");
+const minuteRef = useTemplateRef<InstanceType<typeof NumberInput>>("minute");
+
+const animateIntro = async () => {
+  await Promise.all([
+    hourRef.value?.animateIntro(),
+    minuteRef.value?.animateIntro(),
+    gsap
+      .timeline()
+      .to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
+      .to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0),
+  ]);
+};
+
+const animateOutro = async () => {
+  await Promise.all([
+    hourRef.value?.animateOutro(),
+    minuteRef.value?.animateOutro(),
+    gsap
+      .timeline()
+      .to(
+        animation,
+        { offsetY: SLIDE_OFFSET, duration: SLIDE_DURATION, ease: "none" },
+        0,
+      )
+      .to(animation, { opacity: 0, duration: SLIDE_DURATION, ease: "none" }, 0),
+  ]);
+};
+
+onMounted(() => {
+  animateIntro();
+});
+
+const handleCancel = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = () => {
+const handleConfirm = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
 onRender((ctx) => {
   assets.images.home.topScreen.background.draw(ctx, 0, 0);
 
+  ctx.globalAlpha = animation.opacity;
+  ctx.translate(0, animation.offsetY);
   assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 112, 63);
 });
 
@@ -31,12 +77,14 @@ defineOptions({ render: () => null });
 
 <template>
   <NumberInput
+    ref="hour"
     :model-value="now.getHours()"
     :title="$t('settings.clock.time.hour')"
     :x="4 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
+    ref="minute"
     :model-value="now.getMinutes()"
     :title="$t('settings.clock.time.minute')"
     :x="9 * 16 - 1"