主要針對navbar進行微微動畫的設計:
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>

// 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。
.profile-phone {
    width: 100%;
    animation: updown 3s linear infinite;
}
@keyframes updown {
  0% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(-15px);
  }
}
好就這樣了,我不想寫了QQ