如何添加幻灯片转场在导航条下拉菜单中的引导4与vue js转场

<template>
  <div>
    <nav>
      <ul>
        <li v-for="(item, index) in menuItems" :key="index" @click="changeSlide(index)">
          {{ item.name }}
        </li>
      </ul>
    </nav>
    
    <transition name="slide-fade">
      <div v-if="currentSlide !== null" class="slide">
        {{ menuItems[currentSlide].content }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { name: "菜单1", content: "幻灯片1的内容" },
        { name: "菜单2", content: "幻灯片2的内容" },
        { name: "菜单3", content: "幻灯片3的内容" }
      ],
      currentSlide: null
    };
  },
  methods: {
    changeSlide(index) {
      this.currentSlide = index;
    }
  }
};
</script>

<style>
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity 0.5s;
}

.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
}
</style>