【Vue】Vue项目实现菜单切换效果动画

1. 实现效果

2. 实现步骤

2.1 在页面组件之间添加过渡效果

使用 < transition name=“fade”>包裹 < router-view > 元素

<template>
  <div>
    <el-container>
      <el-header>
        <Layout></Layout>
      </el-header>
      <el-main>
        <transition name="fade">
          <router-view></router-view>
        </transition>
      </el-main>
    </el-container>
  </div>
</template>

2.2 设置过渡效果的CSS样式

<style scoped>
  /* 菜单的淡入淡出效果 */
  .fade-enter-active, .fade-leave-active {
    /* 设置过渡效果的CSS属性名称 */
    transition-property: opacity margin;
    /* 设置过渡效果需要的时间 */
    transition-duration: .5s;
  }
  .fade-enter-active {
    /* 设置过渡效果何时开始 */
    transition-delay: .25s;
  }
  .fade-enter, .fade-leave-active {
    /* 过渡效果属性 */
    opacity: 0;
    margin-left: 50px;
  }
</style>

3. 过渡的类名

在进入\ 离开的过渡中，会有6个 class 切换

1. v-enter ： 定义进入过渡的开始状态
2. v-enter-active ： 定义进入过渡生效时的状态
3. v-leave： 定义离开过渡的开始状态
4. v-leave-active ： 定义离开过渡生效时的状态

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的< transition>， 则 v- 是这些类名的默认前缀。如果使用了< transition name=“my-transition”>,那么 v-enter 会替换为 my-transition-enter，其它过渡类类似…

具体描述参考：单元素/组件的过渡