Question

我在div中有这两个段落标签。一段从div的顶部掉下来，停留片刻，然后消失。另一个以0,0的比例开始，然后增长到1,1。其中的每一个都在keyframes中与CSS计时。理想的效果是第一个对象掉了，是它的事，然后它从元素中掉了出来，第二个对象长成了一个视图，做了它的事，然后重复了所有操作。

我不知道该怎么做。 CSS不允许在keyframe设置中将显示更改为“ none”，如果我不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);
          }

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

1 个答案: