Animierte Listenelemente von links eins nach dem anderen

Question

Wie kann ich Listenelemente animieren, die von links nach links verschoben werden und nacheinander eingeblendet werden? Wenn die Animation 1 Sekunde nach dem Anklicken der Schaltfläche beginnt?

HTML:

<button>Click</button> 

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

CSS:

ul {list-style-type: none; display:none;} 

JS:

$("button").click(function(){ 

    $("ul").fadeIn(); 

}); 

CodePen:

http://codepen.io/i76/pen/YGkaZv

Answer 1

Es ist nicht ein Fade enthält in (Sie Opazität selbst animieren könnte), aber man konnte eine gestaffelte Liste von materialize-css

bearbeiten verwenden: obwohl die Demo die Verwendung eines Button-Klick zeigt, können Sie tut es trotzdem wie Sie durch

Materialize.showStaggeredList('#staggered-test') 

Aufruf Wo Sie #staggered-test mit einer Wahl für Ihre Liste ersetzen sollen.

Answer 2

Mit GreensocksTweenMax.staggerTo, TweenMax.staggerFrom und TweenMax.staggerFromTo wird die Arbeit tun.

Answer 3

Sie können translateX() verwenden, um slideIn-Effekt und opacity für FadeIn und fügen Sie das mit Klasse hinzu. Sie können auch delay() verwenden, um Animationen für Elemente nacheinander auszuführen.

$("button").click(function() { 
 
    $("li").delay(500).each(function(i) { 
 
    $(this).delay(100 * i).queue(function() { 
 
     $(this).addClass("show"); 
 
    }) 
 
    }) 
 
});

ul { 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    transform: translateX(-100%); 
 
    transition: transform 0.5s, opacity 2s; 
 
    opacity: 0; 
 
} 
 

 
.show { 
 
    opacity: 1; 
 
    transform: translateX(0%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click</button> 
 

 
<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
</ul>

Answer 4

ich das nicht denken kann leider mit reinem CSS geschehen (ich wünsche!) Hier so ist eine Lösung, JQuery und Rekursion.

Anscheinend Stackofflow Snippet-Tool ermöglicht nicht für Jquery, also hier ist der Code ohne das Tool.

JavaScript

function fadeInSequentially (element) { 
    if (element == null || element.length === 0) { 
    return; 
    } 
    $(element).fadeIn(400, function() { 
    fadeInSequentially($(element).next()); 
    }); 
} 

$("button").click(function(){ 

    setTimeout(function() { 
    fadeInSequentially($("li").first()); 

    }, 800); 

}); 

CSS

ul {list-style-type: none;} 
li {display:none;} 

HTML

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

Answer 5

Add 'display: none;' zu li und dann setTimeout() verwenden, um 1s Lücken zwischen dem Erscheinen von jedem li zu haben. Hier ist Ihre korrigierten Code:

ul {list-style-type: none; } 

li {display:none;} 

$("button").on('click', function(){ 
    var i = 0; 
    $('ul li').each(function() { 
    var _this = $(this); 
    setTimeout(function() { 
     _this.fadeIn(); 
    }, i*1000); 
    i++; 
    }); 
}); 

http://codepen.io/g1un/pen/WGpJvw?editors=0010

Answer 6

Sie benutzerdefinierte CSS benötigen.

CSS

ul{ 
    list-style:none; 
    margin:0; 
    padding:0; 
     overflow:hidden; 
    } 

    ul > li { 
    position: relative; 
    padding: 12px 6px; 
    color: #34495e; 
    background: #fff; 
    cursor: pointer; 
    left: -100%; 
    opacity: 0; 
    margin-bottom: 5px; 
} 
ul > li:before { 
    content: "\f105"; 
    position: absolute; 
    font-size: 31px; 
    right: 10px; 
    font-family: 'FontAwesome' !important; 
    top: 7px; 
    color: #6f6f6f; 
    } 

HTML

<button>Click</button> 

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

<script> 
    $("button").on('click', function(){ 
    $('ul> li').each(function (i) { 
      $(this).delay(300 * i).animate({ opacity: 1, left: 0 }, 800); 
     }); 
    }); 

</script> 

Fiddler Link https://jsfiddle.net/2jro7kco/