javascript循环类随时间和CSS关键帧而变化

Question

我在一个 div 中有这两个段落标记。一段从 div 的顶部掉落，停留片刻，然后从 View 中消失。另一个从 0,0 开始并增长到 1,1。每一个都使用 CSS 中的 keyframes 进行计时。期望的效果是第一个落下，做它的事情，然后在它从元素中掉下来后，第二个进入视野，做它的事情，然后所有重复。

我不知道该怎么做。 CSS 不允许在 keyframe 设置中将显示更改为“无”，如果我不这样做，则显示两个 display:none元素相互抛弃。

我试图创建一个 jquery 循环来无限地改变类，但我很难做到这一点。现在，第一次迭代是完美的。第一个

倒下，停留，然后继续前进。第二个

成长，做它的事情，然后继续前进。但我不能让它重复。

   @keyframes animate1 {

    10% {
    transform: translateY(0px);

  }
             20% {
    transform: translateY(0px);
  }
             90% {
    transform: translateY(0px);
  }
             100% {
    transform: translateY(300px);

  }

}
         @keyframes animate2 {
    16% {
    transform: scale(1, 1);
  }
             80%{
                 transform: scale(.85, .85);
             }
             90%{
                 transform: scale(.85, .85);
                 transform: translateY(0px);
             }
             100% {
                 transform: translateY(300px);
             }
        }

 #animate1{
            transform: translateY(-300px);


        }

        .hidden{
            display: none;
        }
        .animated1{
            display: table-cell;
            vertical-align: middle;
            animation: animate1;
            animation-duration: 2.5s;
          animation-direction: normal;
            animation-iteration-count: infinite;

        }

        #animate2{
            transform: scale(0,0);


        }

        .animated2{
            display: table-cell;
            vertical-align: middle;
            animation: animate2;
            animation-duration: 2.5s;
          animation-direction: normal;
            animation-iteration-count: infinite;

        }

然后是:

<p id="animate1" class="hidden">I'm paragraph 1, I fall down</p>
<p id="animate2" class="hidden">I'm paragraph 2, i grow big</p>

和jquery:

    var one = $("#animate1");
    var two = $("#animate2");

function animate() {

    for(i = 1; i < 10; i++){
        two.removeClass('animated2');
        two.addClass('hidden');
        one.removeClass('hidden');
        one.addClass('animated1');

        setInterval(function(){
            one.removeClass('animated1');
            one.addClass('hidden');
            two.toggleClass('animated2');
        }, 2500)

    }

}

Answer 1

这就是我最终的做法。我创建了一个运行 onload 的函数并将其附加到主体。然后我只是更改了我的 css 类并在更改结束时指向另一个函数。然后在另一个函数的末尾，我指向前一个函数，基本上创建了一个循环。

function initiate(){
          one.toggleClass('animated1');
        setTimeout(switchOne, 3500);

          }

          function switchOne(){
              one.removeClass('animated1');
              one.addClass('hidden');
              two.removeClass('hidden');
              two.addClass('animated2');
              setTimeout(switchTwo, 3500);

          }

          function switchTwo(){
             two.removeClass('animated2');
              two.addClass('hidden');
              one.removeClass('hidden');
              one.addClass('animated1');
              setTimeout(switchOne, 3500);
          }