使用Intersection Observer API延迟翻译元素 [英] Delay translate elements with Intersection Observer API

问题描述

我使用的是路口观察者API 来显示用户滚动到内容时的元素.它运作良好，但我想延迟显示div ，如果有4个div's，我希望第一个显示，接下来0.5秒显示下一个...不是全部在同一时间.在该示例中，效果也仅适用于第一个class，如果有多个class，例如第一个class，则不适用于下一个img classes，仅适用于第一个img classes.您可以在此页面的底部看到该示例.

I'm using Intersection Observer API to show the elements when user scrolls to the content. It works well, but I want to delay the div's to be showed, if there are 4 div's, I want the first to be showed, next 0.5 sec the next is shown... not all in the same time. In the example the effect only applies on the first class too, if there are more than 1 class like there are, it didn't apply to the next img classes, only the first. You can see the example in the bottom of this page.

HTML

<section id="staff" style="padding-top: 100px;">
  <div class="col-lg-12 mx-auto mb-5">
    <div class="container">
      <div class="row icons-info">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
          <img class="floating show-bottom" src="img/Muñeco 1-08.png">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating" src="img/Muñeco 2-08.png">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating" src="img/Muñeco 3-08.png">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
          <img class="floating" src="img/Muñeco 1-08.png">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
      </div>
    </div>
  </div>     
</section>

JS

// Instantiate a new Intersection Observer
let observer7 = new IntersectionObserver(onEntry7);
let staff = document.querySelector('.floating');

let element7 = document.querySelector("#staff p");
observer7.observe(element7);

function onEntry7(entry7) {
  if (entry7[0].isIntersecting) {
    staff.classList.add("show-bottom");
  }
}

CSS

.floating {opacity: 0; transition: 1s opacity;}
.floating.show-bottom {opacity: 1;  
  animation: movefromtop 1s alternate infinite;
  animation-iteration-count: 1;
  animation-fill-mode:  forwards;}
@keyframes movefromtop {
  from {
    transform: translateY(-5em);
  }
  to {
    transform: translateY(0em);
  }
}

推荐答案

使用

Use querySelectorAll() to get all inner div elements, then using forEach call your observer.observe() method for all elements. Then in the observer, use the target property to query the inner image and add the show-bottom class to it.

要在每个动画之间添加延迟，您必须通过返回Promise并使用setTimeout()来创建动画链.如果相交触发同一元素多次，请确保在动画中链接同一元素的次数不超过一次.为此，请使用animatedElements数组来跟踪正在设置动画的元素.

To add a delay between each animation you have to create an animation chain by returning a Promise and using setTimeout(). Also make sure to not chain the same element more than once in the animation if the intersection triggers many times for the same element. For this, use an array of animatedElements to keep track of the elements being animated.

如果只希望对元素设置一次动画，则在开始相交后，可以调用观察者上的unobserve取消进一步的相交事件的注册.

If you only want to animate the elements once, after begin intersected, you can call unobserve on your observer to unregister from further intersection events.

注意:我编辑了HTML/CSS以使网格在代码段中起作用，以演示当多个元素在同一行上时的连续动画效果.我还向内部div添加了with-img类，以便我们可以查询它们并将它们传递给observe方法.

Note: I edited your HTML/CSS to make the grid work in the snippet to demonstrate the sequential animation effect when multiple elements are on the same row. I also added a with-img class to the inner divs so we can query them and pass them to the observe method.

const onEntry7 = animateSequence('.floating', 'show-bottom');
const observer7 = new IntersectionObserver(onEntry7);
const allElements7 = document.querySelectorAll('#staff div.with-img');
allElements7.forEach(e => observer7.observe(e));

function animateSequence(targetSelector, classToAdd, delay = 500) {
  const animatedElements = [];
  let chain = Promise.resolve();

  function show(e) {
    return new Promise((res, rej) => {
      setTimeout(() => {
        e.classList.add(classToAdd);
        res();
      }, delay);
    });
  }
  return function(entries) {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        const elem = entry.target.querySelector(targetSelector);
        if (!animatedElements.includes(elem)) {
          animatedElements.push(elem);
          console.clear();
          console.log('chaining', ...animatedElements.map(e => e.getAttribute('data--name')));
          chain = chain.then(() => show(elem));
          observer7.unobserve(entry.target);
        }
      }
    })
  }
}

.floating {
  opacity: 0;
  transition: 1s opacity;
  width: 157px;
  height: 220px;
}
.floating.show-bottom {
  opacity: 1;  
  animation: movefromtop 1s alternate infinite;
  animation-iteration-count: 1;
  animation-fill-mode:  forwards;
}
@keyframes movefromtop {
  from { transform: translateY(-5em); }
  to { transform: translateY(0em); }
}
section#staff {
  margin-top: 200px;
  margin-bottom: 200px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
Scroll Down
<section id="staff" style="padding-top: 100px;">
  <div class="col-lg-12 mx-auto mb-5">
    <div class="container">
      <div class="row icons-info">
        <div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3">
          <img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 1-08.png" data--name="1">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
        <div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 2-08.png" data--name="2">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 3-08.png" data--name="3">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3">
          <img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 1-08.png" data--name="4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
      </div>
    </div>
  </div>     
</section>

这篇关于使用Intersection Observer API延迟翻译元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！