CSS 将每个列表项单独设置动画

Question

我有代码片段(HTML/CSS/JavaScript/jQuery(。 问题是关于类items-list的<ul>与类list-div的右div .我
设法对整个列表进行了动画处理，但是，我尝试将每个列表项动画化以在其结束位置飞行。我知道我可以使用带有延迟动画的简单 jQuery，例如

var delay = 0;
$("#list-to-animate li").each(function() {
$(this).delay(delay).animate({"top" : "+=30px"}, "fast");
delay += 200;
});

但这不适用于我的整个 JavaScript，它检查元素是否真的在屏幕上。
我也在为如何正确定位li元素而苦恼，因此它们不在list-div之内。
有人可以帮我按照现在整个列表的方式对每个li进行动画处理，以便连续飞入吗？
PS：我不确定嵌入的视频是否有效，如果不是向下滚动。

$(document).on('click', 'a[href^="#"]', function (event) {
//prevent direct jump to the linked element
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
var slideIndex = 0;
// run TWO slideshows, one for each slider
showSlides(0);
showSlides(1);
// give your slider function parameter of index
function showSlides(index) {
var i;
// select the particular slider and THEN its slides
var sliderBlock = document.getElementsByClassName("instagram-slideshow")[index];
var slides = sliderBlock.getElementsByClassName("slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
// after timeout run appropriate function again
setTimeout(function() {showSlides(index)}, 2000);
}
(function($) {
$.fn.visible = function(partial) {

var $t            = $(this),
$w            = $(window),
viewTop       = $w.scrollTop(),
viewBottom    = viewTop + $w.height(),
_top          = $t.offset().top,
_bottom       = _top + $t.height(),
compareTop    = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;

return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};

})(jQuery);
var win = $(window);
var allModifications = $(".half-width-content");
//make all elements visible that are directly visible
allModifications.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.find(".half-width-text").addClass("open"); 
el.find(".list-div").addClass("open"); 
} 
});
//make elements visible that get scrolled into the viewport
win.scroll(function(event) {

allModifications.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.find(".half-width-text").addClass("open"); 
el.find(".list-div").addClass("open"); 
} 
});

});

body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;    
flex-direction:row;    
height:100vh;
background-color: beige;
}
.container > div {
min-height: 100vh;
border:1px solid black;
box-sizing:border-box;
background-color: inherit;
}
.container > div > a > .dot{
position: relative;
transition: background .2s linear;
left: 50%;
bottom: 10%;
z-index: 101;
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
}
.container > div > a  > .dot > .arrow-down {
transition: border .2s linear;
position: absolute;
top:11%;
left: 24%;
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
}
.container > div > a .dot:hover{
background: black;
}
.container > div > a .dot:hover > .arrow-down{
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
}
.container > div > a > .dot > .arrow-down{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.container > div .content{
height: 100vh;
width: 100vw;
background-color: inherit;
}
.full-width {
width:100%;              
}
.half-width {
width:50%;
}
.video-iframe.fullsize{
height: 100%;
width: 100%;
}
.list{
list-style: none;
text-align: center;
}
.half-width > .half-width-content{
position: relative;
margin-top: 0;
height: 100%;
width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow{
position: relative;
height: 100%;
width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow > img{
position: absolute;
width: 100%;
height: 100%;
}
.half-width > .half-width-content > .half-width-text {
position: absolute;
left: 50%;
top: 150%;
visibility: hidden;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 2s linear;
}
.half-width > .half-width-content > .half-width-text > h1{
text-align: center;
}
.half-width > .half-width-content > .half-width-text.open{
visibility: visible;
top: 50%;
}
.half-width > .half-width-content > .list-div {
position: absolute;
left: 50%;
top:50%;
visibility: visible;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 2s linear;
}
.half-width > .half-width-content > .list-div{
visibility: hidden;
z-index: -1;
top: 120%;
transition: all 2s linear;
}
.half-width > .half-width-content > .list-div.open{
top: 50%;
z-index: 100;
visibility: visible;
}
.full-width > .content > .third-parent{
height: 100%;
display: flex;
flex-directin: row;
}
.full-width > .content > .third-parent > .third{
position: relative;
flex: 1 1 0px;
border: 1px solid black;
}
.full-width > .content > .third-parent > .third > img{
position: absolute;
width: 50%;
height: 50%;
left: 50%;
top:50%;
visibility: visible;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.full-width > .content > .third-parent > .third > .middle-text{
position: absolute;
left: 50%;
top:50%;
visibility: visible;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="full-width">
<iframe class="video-iframe fullsize" src="https://www.youtube.com/embed/5C7r6HhALuk"" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<a href="#section2">
<span class="dot">
<i class="arrow-down"></i>
</span>
</a>
</div>
<div class="half-width" id="section2">
<div class="half-width-content">
<div class="half-width-text">
<h1>Headline</h1>
<div class="text-content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
</div>
</div>
</div>
</div>
<div class="half-width">
<div class="half-width-content">
<div class="instagram-slideshow" id="1">
<img class="slide" src="http://placekitten.com/200/300">
<img class="slide" src="https://placeimg.com/640/480/animals">
<img class="slide" src="http://placekitten.com/200/300">
</div>
</div>
</div>
<div class="half-width">
<div class="half-width-content">
<div class="instagram-slideshow" id="2">
<img class="slide" src="https://fakeimg.pl/350x200/?text=Hello">
<img class="slide" src="https://fakeimg.pl/350x200/?text=Bye">
<img class="slide" src="https://fakeimg.pl/350x200/?text=BLA">
</div>
</div>
</div>
<div class="half-width">
<div class="half-width-content">
<div class="list-div">
<ul class="items-list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</div>
</div>
<div class="full-width">
<div class="content">
<div class="third-parent">
<div class="third" id="one">
<img src="https://placeimg.com/640/480/animals">
</div>
<div class="third" id="two">
<div class="middle-text">
<h1>Headline</h1>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</div>
<div class="third" id="three">
<img src="https://placeimg.com/640/480/animals">
</div>
</div>
</div>
</div>
</div>

Answer 1

您可以使用自定义属性将延迟传递给 Javascript 中的每个元素。您可以使用由类或 aria 属性触发的关键帧或简单过渡(甚至更好(。

/* Simplified for reading */
LISTELEMENTS.each ...
ELEMENT.style.setProperty('--item-animiation-delay', ELEMENTINDEX * 100 +"ms");

@keyframes fade-to-left {
from {
opacity: 0;
transform: 100%;
}

to {
opacity: 1;
transform: none;
}
}
.ListItem {
animation-name: fade-to-left;
animation-duration: 600ms;
animation-delay: var(--item-animiation-delay, 300ms);
}

Answer 2

ul.items-list { 位置：相对; } ul.items-list li { 位置：绝对; } ul.items-list li：nth-child(1( { top： 500px; transition： top .2s; opacity： 0; } ul.items-list li：nth-child(2( { top： 500px; transition： top .2s .2s; opacity： 0; } ul.items-list li：nth-child(3( { top： 500px; transition： top .2s .4s; opacity： 0; } ul.items-list li：nth-child(4( { top： 500px; transition： top .2s .6s; opacity： 0; } ul.items-list.bindDynamicclass li：nth-child(1( { top： 0; opacity： 1; } ul.items-list.bindDynamicclass li：nth-child(2( { top： 20px; opacity： 1; } ul.items-list.bindDynamicclass li：nth-child(3( { top： 40px; opacity： 1; } ul.items-list.bindDynamicclass li：nth-child(4( { top： 60px; opacity： 1; }

使用 js 在滚动时将一些类(.bindDynamicclass( 绑定到 ul.items-list。