如何基于第n个位置添加“渐进式”动画延迟？ [英] How to add a *progressive* animation delay based on n-th position?

问题描述

我想为物品列表制作动画。第一个动画的延迟时间为0ms，第二个动画的延迟时间为50ms，第三个动画的延迟时间为100ms，依此类推。该列表是动态的，所以我不知道长度。

I'd like to animate a list of items. The first should animate with 0ms delay, the second should do the same animation with 50ms delay, third with 100ms delay and so on. The list is dynamic so I won't know the length.

这可能吗？注意：我不需要特定的动画/关键帧帮助，而是如何使用nth-child或nth-of-type（或其他任何类型？）来实现基于同级兄弟之间的相对位置的渐进式动画延迟。

Is this possible? Note: I don't need help with animations / keyframes specifically, but how to use nth-child or nth-of-type (or anything else?) to achieve a progressive animation delay based on relative position between siblings.

如果有帮助，我正在使用React / SASS / Webpack。如有必要，我可以使用jQuery，但如果可能的话，我宁愿避免使用它。

I'm using React / SASS / Webpack if that helps. I can use jQuery if necessary but I'd rather avoid it if possible.

推荐答案

下面是一个有关如何执行类似操作的示例这与纯CSS。
您可以轻松地对其进行更改以使其满足您的需求。

Here's an example on how to do something like this with pure CSS. You can easily alter it to bring it to your needs.

$(document).ready(function() {

  $('.myList img').each(function(i){
    var item = $(this);
    setTimeout(function() {
      item.toggleClass('animate');
    }, 150*i);
  })

});

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.myList img {
  float: left;
  margin: 5px;
  visibility: hidden;
}

.myList img.animate {
  visibility: visible;
  animation: FadeIn 1s linear;
  animation-fill-mode:both;
  animation-delay: .5s
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myList">
  <img src="http://placehold.it/350x30" />
  <img src="http://placehold.it/350x30" />
  <img src="http://placehold.it/350x30" />
  <img src="http://placehold.it/350x30" />
  <img src="http://placehold.it/350x30" />
</div>

这篇关于如何基于第n个位置添加“渐进式”动画延迟？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！