手写带有过渡效果的导航栏

<template>
  <div class="container">
    <div class="tab" :style="{ '--left': left, '--width': width }">
      <div
        class="item"
        :class="{ active: activeIndex === index }"
        v-for="(item, index) of list"
        :key="index"
        @click="handleClick($event, index)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
const list = ["React", "Vue", "Angular", "javascript", "Antd", "Tdesign"]

const activeIndex = ref(0)
const left = ref(0)
const width = ref("90px") // 第一个item的宽度

function handleClick({ target }, index) {
  const { width: itemWidth, left: itemLeft } = target.getBoundingClientRect()
  const { left: parentLeft } = target.parentElement.getBoundingClientRect()

  left.value = itemLeft - 4 - parentLeft + "px"
  width.value = itemWidth + "px"
  activeIndex.value = index
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #e0eaf7;
  display: flex;
  justify-content: center;
}
.tab {
  position: relative;
  display: flex;
  height: 50px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 24px;
  position: relative;
  border: 4px solid #fff;
}
.item {
  margin: 0;
  padding: 12px 24px;
  cursor: pointer;
  z-index: 10;
  color: #598bf0;
  transition: color 0.5s ease-in-out; /* 为文字颜色添加过渡 */
}
.active {
  color: #fff;
}
.tab::before {
  content: "";
  position: absolute;
  left: var(--left);
  width: var(--width);
  height: 100%;
  background-color: #598bf0;
  border-radius: 24px;
  transition: all 0.5s;
  transition-timing-function: ease-in-out;
}
</style>