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

Question

我有代码片段 (HTML/CSS/JavaScript/jQuery)。问题是关于 <ul>同类items-list在类 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);
}