如何使元素使用css動畫逐個顯示

Question

如何使元素使用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>

Answer 1

我剛寫了一些類似的代碼閃爍或字符串中的彈出單個字符會非常欣賞的。我沒有提供任何特定於您的代碼的東西，而是更多地使用了將動畫應用到一組元素的原則或方法。

這是沿着類似的路線 - 這可能是有用的，首先我給我的字符串中的每個元素一個單獨的，連續的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> 

其實我寫了一個函數，一個字符串作爲參數，並使用順序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> </P >標籤文件並調用：

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

它將應用於動畫將一個個字符分別。

不用說，你不需要使用animate（），你可以做任何你想做的事情。甚至可能適應函數，以便它接受一個回調參數，世界上你的牡蠣，但我希望它有助於sme方式。