Для реализации анимации пунктов меню с приростом задержки для каждого пункта в Vue.js есть несколько способов. Вот один из них.
1. Подключите Vue.js в ваш проект и создайте новый компонент для меню.
<template>
<div>
<ul>
<li v-for="(item, index) in menuItems" :key="index" :style="{ animationDelay: delay(index) }">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: ['Пункт 1', 'Пункт 2', 'Пункт 3', 'Пункт 4', 'Пункт 5'],
};
},
methods: {
delay(index) {
return `${index * 0.2}s`;
},
},
};
</script>
<style>
li {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
2. В данном компоненте мы используем директиву v-for для отображения элементов меню в цикле. Цикл выполняется по массиву menuItems, который мы объявляем в опциях data() компонента.
3. Затем, внутри цикла, мы применяем уникальный ключ для каждого элемента с помощью :key="index". Ключи необходимы для оптимизации рендеринга компонента.
4. Для применения анимации мы добавляем стили к каждому элементу с использованием директивы :style="{ animationDelay: delay(index) }". В данном случае мы применяем анимацию fadeIn, которая задает появление пункта меню снизу с задержкой в зависимости от его индекса.
5. В опциях компонента мы объявляем метод delay(index), который возвращает значение задержки в секундах в зависимости от индекса элемента. В данном случае значения задержки вычисляются как index * 0.2s, что означает, что каждый следующий пункт меню появляется через 0.2 секунды позже предыдущего.
6. Наконец, мы добавляем стили для анимации, которые задают начальное состояние элемента и его анимацию. В данном случае, используется анимация fadeIn, которая задает плавное появление элемента снизу.
Теперь, если вы используете данный компонент в вашем приложении и передаете ему список пунктов меню, он будет реализовывать анимацию с приростом задержки для каждого пункта. Каждый пункт меню будет появляться плавно снизу через 0.2 секунды после предыдущего пункта.