如何使用css动画逐个显示元素

How to make elements appear one by one using css animation

本文关键字:显示 元素 动画 何使用 css      更新时间:2023-09-26

如何使用css动画(jQuery)让元素一个接一个地出现,我试图让它看起来像波浪,但我只能一次显示所有元素,所以如果你能帮助我,我将不胜感激

$(window).scroll(function() {
  $(".wave").each(function() {
    var position = $(this).offset().top;
    var winTop = $(window).scrollTop();
    if (position < winTop + 650) {
      $(this).addClass("slide-wave");
    }
  });
});
.wave {
  visibility: hidden;
}
.slide-wave {
  animation: slide-one .4s;
  visibility: visible;
}
@keyframes slide-one {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>

我刚刚写了一些类似的代码来在字符串中闪烁或弹出单个字符。我不提供任何特定于您的代码的内容,而是提供我用于将动画应用于一组元素的原理或方法。

这是沿着类似的路线进行的——这可能是有用的,首先我给字符串的每个元素一个单独的、顺序的ID——有点像数组:

<p id="char-0">S</p>
<p id="char-1">t</p>
<p id="char-2">r</p>
<p id="char-3">i</p>
<p id="char-4">n</p>
<p id="char-5">g</p>

我实际上写了一个函数,它将字符串作为参数,并生成这些<p>带有顺序ID的标签。我所做的下一件事是编写一个递归函数,它遍历所有元素,类似于以下内容:

function popElements(
    strElID,     // Element ID prefix string
    intStart,    // Start element
    intEnd,      // End element
    objTo,       // Animate from current state to this...
    objFrom,     // ...animate from objTo to this.
    intDuration, // duration for the animations.
    strEasing,   // For animate
    intTimeout   // Interval between recursive calls
) {
    var e = intStart;   // intFrom needs to be increased/decreased for next
                        // call, record it here.
    var f;
    $(document).ready(function() {
        // Use the .length property to check for the existence of
        // this element, if we call:
        //
        //    popElements(
        //        "char-",
        //        0,
        //        10,
        //        { "opacity": "0.00" },
        //        { "opacity": "0.99" },
        //        500,
        //        "linear",
        //        100
        //    )
        // We will apply the animations to all char-*n* and return when
        // char-*n* isn't found
        if ($("#" + strElID + e.toString()).length == 0)
            return;
        // We need to remember the value of e because it points to the
        // current element being animated, but we need to increase/decrease
        // it also for the next call to popElements().
        f = e;
        if (f < intEnd)
            // Forwards
            f++;
        else if (f > intEnd)
            // Backwards
            f--;
        // Do the first animation.
        $("#" + strElID + e.toString()).animate(
             objTo,
            intDuration,
            strEasing,
            // Last animation
                function() {
                $("#" + strElID + e.toString()).animate(
                    objFrom,
                    intDuration,
                    strEasing
                );
            }
        );
        // The last element has been animated..
        if (e == intEnd)
            return;
        // Next element, we're passine the value of f here which should
        // point to the next element to be animated
        setTimeout(function() {
            popElements(
                strElID,
                f,
                intEnd,
                objTo,
                objFrom, 
                intDuration,
                strEasing,
                intTimeout
            );
        }, intTimeout);
    });
}

重要的是以这样一种方式对id进行编号,以便它们在循环中易于引用。如果你认为我有帮助的话,我可以发布我的实际代码,但它对我的项目很具体,可能没有帮助,但这只是你如何使它发挥作用的一个想法。

效果很好,效果也很好。

如果你把上面的<p>lt/p>文件中的标签并调用:

    popElements(
        "char-",
        0,
        10,
        { "opacity": '0.01' },
        { "opacity": '0.99' },
        500,
        "linear",
        100
    );

它将分别将动画应用于每个角色。

从本质上讲,不用说你不需要使用animate(),你可以随心所欲。也许甚至可以调整函数,使其接受回调参数,世界是你的牡蛎,但我希望它对中小企业有帮助。