VueJS 中的动画菜单效果的实现

英文 | https://mattmaribojoc.medium.com/animated-active-menu-highlights-in-vuejs-daily-vue-tips-1-accd47fac612

最近，我在写一个项目，我想要一种干净的方式来突出当前页面时，于是，我去研究了导航菜单。

通常，我只是给一个元素一个不同的颜色，然后就结束了，但这次我想实现一些动画。

最终，我使用了 Composition API 和 CSS 样式构建了一些简洁的活动菜单来突出显示逻辑。

以下效果就是我最终构建的样子。

接下来，让我们正式开始吧。

01、创建菜单

我们要做的第一件事就是创建我们的菜单，我们将使用一个 <ul> 元素，其中包含四个 <li> 元素，我们也会给它一些漂亮的样式，这个例子还使用了 FontAwesome 来制作一些漂亮的图标。

<template>
  <div class='sidebar'>
    <ul class='sidebar__nav'>
      <li> <i class='fas fa-th'></i>Dashboard </li>
      <li> <i class='fas fa-paperclip'></i>Links </li>
      <li> <i class='fas fa-sitemap'></i>Visualization</li>
      <li> <i class='fas fa-sliders-h'></i>Settings </li>
    </ul>
  </div>
</template>


<script>
export default {
}
</script>


<style lang="scss" scoped>
  .sidebar {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    width: 300px;
    font-size: 1.2em;
    background-color: #fff;
    padding: 30px 0 0 30px;
    box-sizing: border-box;
    float: left;
  }


  ul.sidebar__nav {
    width: 100%;
    position: relative;


    li {
      margin-bottom: 10px;
      padding: 10px 0;
      font-size: 0.9em;
      color: #d2dae2;
      cursor: pointer;


      &.selected {
        color: #4bcffa;
      }


      i {
        width: 40px;
        color: inherit;
      }
    }
  }
</style>

然后，我们要设置一个表示当前页面的响应式数据属性，因此，使用 Composition API，我们希望在 setup 方法中声明它。

import { ref } from 'vue'
export default {
  setup () {
    const selected = ref(0) // index of the selected el


    return {
      selected
    }
  }
}

接下来，我们要创建一个可以更改 currentPage 变量的方法。

setup () {
    const selected = ref(0) // index of the selected el


    const changeSelected = (i) => {
      selected.value = i
    }
    return {
      changeSelected,
      selected
    }
}

回到我们的模板中，我们要做两件事。

• 调用changePage 方法的点击监听器。

• 一个动态类绑定，允许我们设置我们选择的页面的样式。

<li
   :class=' { "selected": selected === 0 } '
   @click='changeSelected(0)' 
>
   <i class='fas fa-th'></i>
   Dashboard 
</li>
 <li
   :class=' { "selected": selected === 1 } '
   @click='changeSelected(1)' 
>
   i class='fas fa-paperclip'></i>
   Links
</li>
<!-- continue for the rest -->

现在，在这一点上，让我们看看发生了什么。

现在，我们制作活动菜单动画高亮效果。

02、创建我们的活动菜单突出显示

我们要做的第一件事是构建我们的高亮 div 并定位它。

在我们的模板中，我们希望将它插入到导航中所有 <li> 元素之后。

<ul>
        <!-- after all the <li> -->
        <div class='select-highlight' />
</ul>

然后，在样式中，我们要给它一个位置：绝对并对齐到右侧，我们还想设置它的大小、颜色，最重要的是给它的 top 属性设置一个过渡。

这实际上将处理我们正在寻找的平滑幻灯片动画。

.select-highlight {
      position: absolute;
      right: 0;
      top: 5px;
      height: 30px;
      width: 4px;
      background-color: #4bcffa;
      transition: 0.1s top ease-out;
}

以下效果就是它的样子。

03、突出显示动画菜单

高亮需要根据所选元素移动，通过changePage 方法并添加以下代码来访问我们的高亮并更改其顶部位置。

在我们的示例中，每个元素都是高 50 像素，所以，这就是我们使用的因素，但在你的项目中可能会有所不同。

const changeSelected = (i) => {
      selected.value = i
      document.getElementsByClassName('select-highlight')[0].style.top = i * 50 + 5 + 'px'
}

由于我们给出了突出显示的过渡，该元素将在新旧顶部位置之间平滑移动。

到这里就全部完成了。在项目中使用到的一些漂亮的小图标也有很多应用场景。例如，分页、导航菜单、悬停效果等。

我们还可以使用 CSS 关键帧和动画属性来实现动画，只要我们选择的元素发生变化，只需修改值并触发动画。

如果你能将它实现到 Vue 项目中的话，这个也是很酷的方法！

最后，我希望今天这个快速的 Daily Vue 技巧对你有所帮助，并且可以想出在你的代码中使用这种技术的方法。

祝编程愉快！

学习更多技能

请点击下方公众号