Анимированные основные моменты активного меню в VueJS - Ежедневные советы по Vue # 1
Недавно я работал над меню навигации, когда понял, что мне нужен чистый способ выделения текущей страницы.
Обычно я просто придаю элементу другой цвет и называю это днем, но на этот раз я хотел поработать с чем-то анимацией.
В итоге я создал аккуратную логику выделения активного меню, используя Composition API и стили CSS.
Я думал, что поделюсь своим решением - вот что я в итоге построил.
Ладно, приступим к кодированию.
Создание нашего меню
Итак, первое, что мы хотим сделать, это создать наше меню. Мы будем использовать <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, мы хотим объявить это в нашем методе настройки.
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 -->А теперь давайте посмотрим, что у нас есть.
Намного лучше, теперь давайте сделаем активную подсветку нашего меню.
Создание нашей активной подсветки меню
Первое, что мы хотим сделать, это создать наш блок выделения и расположить его.
В нашем шаблоне мы хотим вставить его в нашу навигацию после всех элементов ‹li›.
<ul>
<!-- after all the <li> -->
<div class='select-highlight' />
</ul>Затем внутри нашего стиля мы хотим присвоить ему position: absolute и выровнять его по правой стороне. Мы также хотим установить его размер, цвет и, самое главное, задать переход для его верхнего свойства.
Это будет фактически обрабатывать плавную анимацию слайдов, которую мы ищем.
.select-highlight {
position: absolute;
right: 0;
top: 5px;
height: 30px;
width: 4px;
background-color: #4bcffa;
transition: 0.1s top ease-out;
}Вот как это должно выглядеть.
Анимация выделения нашего активного меню
Чтобы действительно сделать наше выделение в зависимости от выбранного элемента, мы хотим вернуться к нашему changePage методу и добавить следующий код, который обращается к нашему выделению и изменяет его верхнее положение.
В нашем примере каждый элемент имеет высоту 50 пикселей, поэтому мы используем именно этот коэффициент, но в ваших проектах он может быть другим.
const changeSelected = (i) => {
selected.value = i
document.getElementsByClassName('select-highlight')[0].style.top = i * 50 + 5 + 'px'
}Благодаря переходу, который мы выделили, элемент будет плавно перемещаться между старым и новым верхним положением.
Все сделано!
И все готово. Есть множество вариантов использования небольшого симпатичного пользовательского интерфейса. Например, это может быть полезно для разбивки на страницы, меню навигации, эффектов наведения и многого другого.
Вы также можете реализовать анимацию с ключевыми кадрами CSS и свойствами анимации и просто изменять значения и запускать анимацию всякий раз, когда изменяется наш выбранный элемент.
Дайте мне знать, как вы можете реализовать это в своих проектах Vue!
Надеюсь, вы нашли этот быстрый совет Daily Vue полезным и можете придумать, как использовать эту технику в своем коде.
Удачного кодирования!
Это первая публикация из серии Daily Vue Tips, в которой представлены краткие руководства по коду Vue. Цель этой серии - предоставить полезные фрагменты и советы по Vue в краткой и удобоваримой форме. Надеюсь, вам понравится!
