时间戳

首页 > 解决方案 > 如何使用动画迭代 vue 组件

html - 如何使用动画迭代 vue 组件

问题描述

我想为导航栏的锚点制作简单的外观效果。我已经将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样式来实现动画效果？

标签： htmlvue.jsanimationsass

解决方案

你可以试试这个。

<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-forasv-for="(navLink, index) in navLinks"来了解循环中项目的当前索引。然后，使用绑定创建一个动态类，如:class="trans-nav-${index + 1}".

推荐阅读