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

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

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

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

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

　　01、创建菜单

　　我们要做的第一件事就是创建我们的菜单，我们将使用一个<ul>元素，其中包含四个<ul>元素，我们也会给它一些漂亮的样式，这个例子还使用了 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

　　}

　　}

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

　　<li< p="">

　　:class=' { "selected": selected === 0 } '

　　@click='changeSelected(0)'

　　>

　　Dashboard

　　<li< p="">

　　:class=' { "selected": selected === 1 } '

　　@click='changeSelected(1)'

　　>

　　i class='fas fa-paperclip'>

　　Links

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

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

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

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

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

<ul>

        <!-- after all the <li> -->

        <div class='select-highlight' />

　　然后，在样式中，我们要给它一个位置：绝对并对齐到右侧，我们还想设置它的大小、颜色，最重要的是给它的 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 项目中的话，这个也是很酷的方法!

上一篇

React的遮羞布

下一篇

Vue中常见的组件间通信方案及典型应用场景