问使用交叉点观察者API的延迟转换元素
EN

Stack Overflow用户

提问于 2019-03-17 19:25:16

回答 1查看 809关注 0票数 4

当用户滚动到内容时，我使用Intersection Observer API来显示元素。它工作得很好，但我想延迟div的显示，如果有4个div's，我希望第一个显示，下一个0.5秒显示…不是所有的都在同一时间。在这个例子中，这种效果也只适用于第一个class，如果有超过1个这样的class，那么它不会应用于下一个img classes，而只适用于第一个。您可以在此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/Muñ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/Muñ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/Muñ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/Muñ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>

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

html

css

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-17 20:00:15

使用querySelectorAll()获取所有内部div元素，然后使用forEach为所有元素调用observer.observe()方法。然后在观察器中，使用target属性查询内部图像并向其添加show-bottom类。

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

如果您只想在begin intersected之后为元素设置一次动画，则可以在观察器上调用unobserve以取消对后续交集事件的注册。

注意:我编辑了HTML/CSS，使网格在代码片段中工作，以演示多个元素在同一行时的顺序动画效果。我还向内部div添加了一个with-img类，这样我们就可以查询它们并将它们传递给observe方法。

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/Muñ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/Muñ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/Muñ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/Muñ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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55206507

复制

相似问题

问使用交叉点观察者API的延迟转换元素
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用交叉点观察者API的延迟转换元素EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用交叉点观察者API的延迟转换元素
EN