Question

如何使用css动画（jQuery）逐个显示元素，我尝试让它看起来像一个wave但我只能一次显示所有元素，所以如果你帮助我会很感激

＆＃13;

$(window).scroll(function() {
  $(".wave").each(function() {
    var position = $(this).offset().top;
    var winTop = $(window).scrollTop();
    if (position < winTop + 650) {
      $(this).addClass("slide-wave");
    }
  });
});

＆＃13;

.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%);
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

我刚刚写了一些类似的代码来flash或在字符串中弹出单个字符。我没有提供任何特定于您的代码的内容，但更多的是我用于将动画应用于一组元素的原则或方法。

这是类似的 - 它可能是有用的，首先我给我的字符串的每个元素一个单独的顺序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>

我实际上写了一个函数，它将一个字符串作为参数并生成这些＆lt; p＆gt;带有顺序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进行编号，以便它们在循环中易于引用。如果你认为它会有所帮助，我可以发布我的实际代码，但它对我的项目非常具体，它可能没什么用，但它只是一个关于如何使这项工作的想法。

这是一个很好的效果，效果很好。

如果你把上述＆lt; p＆gt;＆lt; / p＆gt;文件中的标签并致电：

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

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

天然，不用说你不需要使用animate（），你可以随心所欲。甚至可能调整功能，使其接受回调参数，世界是你的牡蛎，但我希望它有助于涂抹。

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

1 个答案: