如何使用动画迭代 vue 组件

Question

我想为导航栏中的锚点制作简单的外观效果。我已经NavigationLink作为内联组件，并添加了如下所示scss样式：

<template>
  <ul>
    <li>
      <NavigationLink target="#header" name="About Me" class="trans-nav-1"/>
    </li>
    <li>
      <NavigationLink target="#portoflio" name="Portfolio" class="trans-nav-2" />
    </li>
    <li>
     <NavigationLink target="#services" name="Services" class="trans-nav-3" />
    </li>
    <li>
     <NavigationLink target="#contact" name="Contact Me" class="trans-nav-4" />
    </li>
  </ul>
</template>

带有v-for语句的版本：

<ul>
  <li
    v-for="navLink in navLinks"
    v-bind:key="navLink.name"
  >
    <NavLink :target="`${navLink.target}`" :name="`${navLink.name}`" :style="style" />
  </li>
</ul>

scss ：

@-webkit-keyframes mymove {
  from {left: -30vw;}
  to {left: 0; visibility: visible;}
}
@keyframes mymove {
  from {left: -30vw;}
  to {left: 0; visibility: visible;}
}
.trans-nav-1 {
  -webkit-animation: mymove 2s;
  animation: mymove 1s;
  animation-fill-mode: forwards;
  position: relative;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  transition: visibility 1s;
}
.trans-nav-2 {
  -webkit-animation: mymove 2s;
  animation: mymove 1s;
  animation-fill-mode: forwards;
  position: relative;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.trans-nav-3 {
  -webkit-animation: mymove 2s;
  animation: mymove 1s;
  animation-fill-mode: forwards;
  position: relative;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.trans-nav-4 {
  -webkit-animation: mymove 2s;
  animation: mymove 1s;
  animation-fill-mode: forwards;
  position: relative;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

我想使用v-for语句，但是当我做这个动画不起作用时。尝试使用<transition>和<transition-group>.显然，我在computed部分中计算了animation-delay，但仍然没有效果。是否可以在这里使用v-for简单的一种scss样式来获得动画效果？

Answer 1

你可以试试这个。

<ul>
  <li
    v-for="(navLink, index) in navLinks"
    v-bind:key="navLink.name"
  >
    <NavLink :target="`${navLink.target}`" :name="`${navLink.name}`" :class="trans-nav-${index + 1}" />
  </li>
</ul>

您可以使用v-for作为v-for="(navLink, index) in navLinks"来了解循环中项目的当前索引。然后，使用绑定创建一个动态类，如 :class="trans-nav-${index + 1}" 。