Question

我想制作级联风格，卡片向上滑动动画。

我已经完成了滑动部分，并且它正在工作。问题是所有卡片同时向上滑动。

我想知道如何为每个人添加延迟。由于卡的数量可能会不时变化，我无法使用css :nth-child(n)选择器来实现它。

继承HTML

<div class='entry animated slideInEntry'>

    <div>
        <span>$submitter</span>
        <span>$amount</span>
    </div>

    <div>$ratingIcon</div>

</div>

这是CSS动画

/* Entry Card Animation -Entry Card Animation -Entry Card Animation -Entry Card Animation -Entry Card Animation */

.slideInEntry{
  -webkit-animation-name: slideInEntry;
          animation-name: slideInEntry;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out; 
}

@-webkit-keyframes slideInEntry{

  0%{
    visibility: hidden;
    margin: 500px;
  }

  50%{
    -webkit-transform: translateY(500px);
            transform: translateY(500px);
    visibility: visible;
  }

  100%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

}

@keyframes slideInEntry{
  0%{
    visibility: hidden;
    margin: 500px;
  }

  50%{
     -webkit-transform: translateY(500px);
            transform: translateY(500px);
    visibility: visible;
  }

  100%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

}

Answer 1

试试这个JQuery代码：

var count = 0;
$(document).ready(function() {

  var intv = setInterval(function() {
    $("#span" + count).show();
    $("#span" + count).addClass("entry animated slideInEntry");
    if (count > $("span").length) {
      clearInterval(intv);
      return;
    } else {
      count = count + 1;
    }
  }, 1000);
});

这是小提琴： https://jsfiddle.net/sampada07/vffxd80w/2/

如何为css类的每个子节点添加动画延迟

1 个答案: