主要針對navbar進行微微動畫的設計：

1. 點擊 navbar 的 item，可以描點至該區塊

在navbar 的 item 加上點擊事件，並為每個區塊元件加上 id，當點擊時就會跳到指定id的位置。

// navbar.vue

const state = reactive({
  items: [
    { title: 'Intro', targetId: 'intro' },
    { title: 'Skills', targetId: 'skills' },
    { title: 'Projects', targetId: 'projects' },
    { title: 'Contact', targetId: 'contact' },
  ],
});

const scrollTo = (id) => {
  const el = document.getElementById(id);
  if (el) {
    el.scrollIntoView({ behavior: 'smooth' });
  }
  // 如果是手機，點了之後順便關掉 drawer
  drawer.value = false;
};

因為我的狀況是單頁式＋導航描點，每個區塊又是獨立元件，用 id 的方式是最簡單的。大型專案的跳轉來說應該要使用的是 Vue Router，搭配 NuxtLink 使用。

<v-navigation-drawer
    v-model="drawer"
    location="right"
    temporary
  >
    <v-list>
      <template v-for="menu in menus" :key="menu.title">
	      <v-list-item v-if="!menu.children">
	        <NuxtLink :to="menu.to" class="nav-link">{{ menu.title }}</NuxtLink>
	      </v-list-item>
	    </template>
    </v-list>
  </v-navigation-drawer>

2. 起始讓 navbar 是透明的，滾動後改變底色，給使用者回饋

// navbar.vue 
<template>
	<v-app-bar class=" px-lg-16 px-3" 
	    :class="navBg ? 'bg-yellow' : 'bg-transparent'" 
	    elevation="0"
	>
    </v-app-bar>
</tempalte>

<script setup>
const navBg = ref(false);

// 滾動事件的監聽
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

// 當滾動事件發生時，更新navBg狀態
const handleScroll = () => {
  navBg.value = window.scrollY > 50;
};
</script>

<style lang="scss" scoped>
.bg-transparent {
  background: transparent !important;
  box-shadow: none !important;
}

:deep(.v-app-bar) {
  background: transparent !important;
  box-shadow: none !important;
}
...
</style>

原先v-app-bar的css要調整一下，使navbar背景成透明狀態，以及取消原先的box-shadow。

3. css animation

.profile-phone {
    width: 100%;
    animation: updown 3s linear infinite;
}

@keyframes updown {
  0% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(-15px);
  }
}

好就這樣了，我不想寫了ＱＱ