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

Posted 2023-03-06

【中文标题】使用 CSS3 动画和 Sass @for 循环触发列表

【英文标题】：Triggering a list with CSS3 animations and Sass @for loop

【发布时间】：2017-04-12 05:29:34

【问题描述】：

我正在尝试使用 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);
  

【参考方案1】：

看这里>jsfiddle

你必须设置一个更大的animation-delay，这样你才能看到lis一个接一个地出现

您必须将opacity:0 与animation-fill-more:forwards 一起设置，所以首先lis 被隐藏，然后它们出现并与opacity:1 保持一致

如果这就是你要找的东西，请告诉我

代码：

（sn-p 不工作，因为它没有 SASS；我只是为了让代码在网站上可见）

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);
  

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

【讨论】：

这正是我想要的。谢谢。顺便说一句，您如何在此处嵌入 snippets 以使其运行。

当您发布答案或问题时。在顶部操作栏上。有一个带有 <> 的按钮，上面写着 javascript/HTML/CSS snippet 。点击那个。然后在他们的容器中插入 HTML CSS JS :) 瞧。很高兴我能帮助你。干杯：d