Question

我有代码段（HTML / CSS / JavaScript / jQuery）。问题是关于右侧类为<ul>的类items-list中的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属性触发的关键帧或简单过渡（甚至更好）。

/* 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 {
        position: relative;
    }
    ul.items-list li {
        position: absolute;
    }
    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上。

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

2 个答案: