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>。显然，我在animation-delay部分计算了computed，但仍然没有效果。可以在这里使用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}"。

如何使用动画迭代Vue组件

1 个答案: