Wie man Elemente eins nach dem anderen mit css Animation erscheinen

Question

Wie man Elemente mit css Animation (jQuery) eins nach dem anderen erscheinen lässt, versuche ich es wie eine Welle zu machen, aber ich kann nur alle Elemente auf einmal zeigen, also ich würde eine Menge schätzen, wenn Sie mir helfen

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

ich habe gerade einen ähnlichen Code geschrieben zu blinken oder einzelne Zeichen in einer Zeichenfolge Pop. Ich biete nichts speziell für Ihren Code an, sondern eher das Prinzip oder die Methode, mit der ich Animationen auf eine Gruppe von Elementen angewendet habe.

Dies zusammen ähnliche Linien - es von Nutzen sein könnte, zuerst habe ich jedes Element meiner Zeichenfolge ein Individuum, sequenzielle ID - eine Art wie ein Array:

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

schrieb ich tatsächlich eine Funktion, die nimmt eine Zeichenfolge als Argument und generiert diese <p> Tags mit der sequentiellen IDs. Ich das nächste, was tat, war eine rekursive Funktion schreiben, die durchläuft alle Elemente, etwa wie folgt:

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

Die wichtige Sache, um die IDs in einer solchen Art und Weise zu nummerieren ist so, wie sie sind einfach in einer Schleife zu referenzieren . Ich kann den tatsächlichen Code posten, den ich habe, wenn Sie denken, dass es hilft, aber es ist ziemlich spezifisch zu meinem Projekt, es könnte nicht helfen, aber es ist nur eine Idee davon, wie Sie das schaffen könnten.

Es ist ein schöner Effekt und funktioniert ganz gut.

Wenn Sie setzen die oben <p> </p > Tags in einer Datei und rufen:

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

Es wird die Animationen auf jedes Zeichen einzeln anzuwenden.

Natürlich müssen Sie animate() nicht verwenden, Sie können tun, was Sie wollen. Vielleicht passen Sie die Funktion sogar so an, dass sie einen Callback-Parameter akzeptiert, die Welt ist Ihre Auster, aber ich hoffe, dass sie hilfreich ist.