CSS为每个列表项分别设置动画

Question

我有代码片段(HTML/CSS/JavaScript/jQuery).问题是关于<ul>与items-list正确的div中的类与类list-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-attributes触发的关键帧或简单转换(甚至更好).

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