0

リストを介して間隔を置いてクラスを追加したいと思います。このクラスは、各リスト項目をページに表示する css アニメーションになるため、効果はアニメーション化された項目の波になります。ループ遅延 addClass 関数は完璧ですが、これは可能ですか?

<html>
<head>
<style>
    ul li {
      -webkit-animation: animation .5s ease-out;
    }
    @-webkit-keyframes animation {
        from { -webkit-transform: 
            translate(-500px); }
        to { -webkit-transform: 
            translate(0px); }
    }
</style>
</head>
<body>

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>

</body>
</html>

または CodePen: http://cdpn.io/aAxHp

これについて私を助けることができる人に感謝します

4

3 に答える 3

0

編集：すべてのアイテムがアニメーション化されたときにclearIntervalを追加しました。そうしないと、永久に実行されます

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
    ul li{
      -webkit-transform: translateX(-500px);
    }
    ul li.animate {
      -webkit-animation: animation .5s ease-out;
      -webkit-transform: translateX(0px);
    }
    @-webkit-keyframes animation {
        from { -webkit-transform: 
            translate(-500px); }
        to { -webkit-transform: 
            translate(0px); }
    }
</style>
<script type="text/javascript">

$(document).ready(function(){
  var interval = setInterval(function(){
    if($('li:not(.animate)').size() == 0){
      clearInterval(interval);
    }else{
      $('li:not(.animate)').first().addClass('animate');
    }
  }, 400);
});

</script>
</head>
<body>

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>

</body>
</html>
于 2013-07-22T17:27:34.527 に答える
0

関数を探していると思います。setInterval使用方法の例を次に示します。

于 2013-07-22T17:24:20.740 に答える