Для создания анимации пунктов меню в Vue.js вы можете использовать возможности vue-transition. Для добавления задержки для каждого последующего пункта можно воспользоваться CSS.
Необходимо использовать CSS-свойство `transition-delay`, рассчитывая его значение основываясь на индексе каждого пункта в массиве.
Йода ваш код:
Во-первых, создайте Vue-компонент, который отображает пункты меню:
```html
<template>
<div id="app">
<transition-group name="list" tag="p">
<div
v-for="(item, index) in menuItems"
:key="item"
class="list-item"
:style="{
animationDelay: index * 0.2 + 's'
}"
>
{{ item }}
</div>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: ['Home', 'About', 'Contact', 'Blog', 'FAQ', 'Terms of Service'],
}
}
}
</script>
```
Файл CSS будет выглядеть следующим образом:
```css
.list-item {
animation: fadeIn 0.6s forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```
В данном примере к каждому пункту меню применяется анимация fadeIn с задержкой, которая становится все большей для каждого последующего пункта меню. Здесь задержка рассчитывается как index * 0.2 секунды.
Обратите внимание, что все анимации выполняются сразу после монтирования компонента. Если вы хотите задержать анимацию до определенного события или действия пользователя, вам нужно будет добавить дополнительный код для обработки этого.