Question

嘿伙计们我正在尝试使用for循环在Sass中创建一个关键帧动画，但是我对它的写作感到磕磕绊绊。我想要的是每个单独的项目一个接一个地出现，但有一个小的延迟。有点像堆叠的卡片。提前致谢

这是codepen。这是代码：

<ul>
  <li><a href="#About">About</a></li>
  <li><a href="#Contact">Contact</a></li>
  <li><a href="Labs">Labs</a></li>
</ul>

html {
  font-size: 62.5%;
   box-zising: border-box;
}

*,
*:before,
*:after {
  box-zising: inherit;
}

html, body {
  width: 100vw;
  height: 100vh;
  background: black;
  font-size: 1rem;
}


ul {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid white;
  width: 100vw;
  height: 100vh;
}

li {
  list-style: none;
  border: 1px solid white;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  background: red;

  @for $i from 1 through 4 {
    &:nth-of-type(#{$i}) {
      animation: slideTop;
      animation-duration: 1.5s + (40ms * $i);
      animation-iteration-count: 5;
      animation-delay: 2.5s + (40ms * $i);
    }
  }

  a {
    display: block;
    padding: 50px;
    color: white;
    font-size: 24px;
    text-decoration: none;
    letter-spacing: 0.1em;
  }
}


@keyframes slideTop {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(50px);
  }
}

Answer 1

见这里＆gt; jsfiddle

你必须设置一个更大的ix, iy, image = im.size[0], im.size[1], im.tobytes()，这样你才能看到animation-delay一个接一个出现

，您必须将li与opacity:0设置在一起，因此首先会隐藏animation-fill-more:forwards，然后它们会显示并保持li

让我知道这是否是您正在寻找的

代码：

（摘录不起作用，因为它没有SASS;我只是把它放在网站上这里可以看到代码）

opacity:1

html {
  font-size: 62.5%;
   box-zising: border-box;
}

*,
*:before,
*:after {
  box-zising: inherit;
}

html, body {
  width: 100vw;
  height: 100vh;
  background: black;
  font-size: 1rem;
}


ul {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid white;
  width: 100vw;
  height: 100vh;
}

li {
  list-style: none;
  border: 1px solid white;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  background: red;
  opacity:0;
  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      animation: slideTop;
      animation-duration: 1s + ($i*400ms);
      animation-iteration-count: 1;
      animation-delay: 2.5s + ($i*400ms);
      animation-fill-mode:forwards;
    }
  }
  a {
    display: block;
    padding: 50px;
    color: white;
    font-size: 24px;
    text-decoration: none;
    letter-spacing: 0.1em;
  }
}


@keyframes slideTop {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(50px);
  }
}

使用CSS3动画和Sass @for循环触发列表

1 个答案: