VueJS中的动画菜单效果的实现
推荐
在线提问>>
最近，我在写一个项目，我想要一种干净的方式来突出当前页面时，于是，我去研究了导航菜单。
通常，我只是给一个元素一个不同的颜色，然后就结束了，但这次我想实现一些动画。
最终，我使用了 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 项目中的话，这个也是很酷的方法!
